一款鼠标焦点图层抖动特效代码

发布时间：2014-08-02 09:14:13　来源/作者：学技巧网页制作　分类：图片特效阅读：0次点评一下

<!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>一款鼠标焦点图层抖动特效代码</title> <style type="text/css"> * { padding:0; margin:0;} #box li { position:relative; display:inline-block; *display:inline; zoom:1; margin:10px; width:100px; height:100px; background:#080; } </style> <script type="text/javascript"> window.onload = function(){ var obj = document.getElementById("box"), oLi = obj.getElementsByTagName("li"), len = oLi.length, timer = null, iNow = 3; for(var i = len;i--;){ oLi[i].onmouseover = function(){ shade(this); } oLi[i].onmouseout = function(){ clearInterval(timer); this.style.left = 0; this.style.top = 0; } }; function shade(el){ clearInterval(timer); timer = setInterval(function(){ el.style.left = iNow+"px"; el.style.top = iNow+"px"; iNow = -iNow; },50); } } </script> </head> <body> <ul id="box"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

鼠标放在图层或图片上面，可导致图层或图片抖动的JS特效代码分享

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

一款鼠标焦点图层抖动特效代码

JS实现鼠标点亮或熄灭灯泡特效

非常适合商品宣传的jquery幻灯切换特效

仿淘宝商品宝贝图片放大效果js特效