|
鼠标放在图层或图片上面，可导致图层或图片抖动的JS特效代码分享
<!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>
版权所有@转载请注明：http://www.esw.net.cn/blogshow.asp?id=309
|
添加到百度搜藏