本文实例讲述了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; //兼容FireFoxif(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; //兼容FireFoxif(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代码在线压缩、格式化与加密工具，非常强大实用：
JavaScript压缩/格式化/加密工具：http://tools.VeVB.COm/code/jscompress
上面这款js工具中的加密功能可实现js代码的eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！
js的eval方法在线加密解密工具：http://tools.VeVB.COm/password/evalencode
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
新闻热点
疑难解答
