一款鼠标焦点图层抖动特效代码-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20489 次

以下是程序代码

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]