这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS+CSS 实现鼠标经过弹出一个 DIV 框的实现方法, 带缓冲渐变动画效果, 涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS+CSS 实现鼠标经过弹出一个 DIV 框效果。分享给大家供大家参考,具体如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- js+CSS实现表格渐变
- </title>
- <style>
- #tip{ position:absolute; left:90px; width:0px; height:0px; color:#FFF;
- font-size:12px; background-color:#000; border:1px solid #DEF; filter:Alpha(Opacity=0);
- opacity:0; z-index:999; }
- </style>
- <script type="text/javascript">
- < !--
- //定义"获得指定dom节点"的函数,因为其重用率高
- function $(d) {
- return document.getElementById(d);
- }
- //控制div逐渐显示
- var i = 0;
- function change_show() {
- var obj = $("tip");
- i = i + 5; //逐渐显示速度
- obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小
- obj.style.opacity = i / 100; //兼容FireFox
- if (i >= 100) {
- clearInterval(s);
- i = 0;
- }
- }
- //控制div逐渐消失
- var j = 100;
- function change_hidden() {
- var obj = $("tip");
- j = j - 5; //逐渐消失速度
- obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大
- obj.style.opacity = j / 100; //兼容FireFox
- if (j <= 0) {
- clearInterval(h);
- //obj.style.display="none";
- j = 100;
- }
- }
- //控制change_show()行为
- var s;
- function show() {
- if (s) {
- clearInterval(s);
- }
- $("tip").style.display = "block";
- s = setInterval(change_show, 1);
- }
- //控制change_hidden()行为
- var h;
- function hiddentip() {
- $("tip").innerHTML = "";
- h = setInterval(change_hidden, 1);
- }
- //-->
- </script>
- </head>
- <body>
- 鼠标滑过这里,渐变出现
- <div id="tip" style="background-color:blue;width:48%;height:48%;" onmouseover="show();"
- onmouseout="hiddentip();">
- </div>
- </body>
- </html>
PS: 上述代码没有进行格式化的排版处理,对此小编给大家提供了一款本站的 js 代码在线压缩、格式化与加密工具,非常强大实用:
上面这款 js 工具中的加密功能可实现 js 代码的 eval 函数加密形式,对此本站还提供了如下这款针对 eval 函数加密的解密工具,非常强大实用!
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0716/266565.html