鼠标移上时图片抖动的效果

解决思路：
所谓抖动，就是对象在X和Y坐标上绕着一个中心位置作上下左右运行，也就是对象在相对定位时的left和top属性值的变化。

具体步骤：

1.插入要作为抖动的图片，并在CSS中定义它的定位方式。

<style>
.shade{position:relative;}
</style>
<img src="demo.gif" class="shade">

2.捕捉发生在抖动图片上的 onmouseover 事件，并调用用于抖动图片的功能函数。

var Style,offset=3,timer,dir=1
document.onmouseover=function(){
    with(event.srcElement)
       if(tagName=="IMG"&&className=="shade"){ 
           Style=style
           shade()
       }
}

function shade(){
    eval("Style.pos"+["Top","Left"][(dir+=dir<4?1:-3)%2]+"+=offset*(dir-3+dir%2)") 
    timer=setTimeout("shade()",50) 
}                        

3.在鼠标移开抖动图片时停止抖动。

document.onmouseout=function(){//鼠标在对象上移开时执行函数
    if(Style){    //如果是之前抖动的图片对象，执行下面的代码
       clearTimeout(timer)      //清除计时器以停止图片的抖动
       Style.posTop=Style.posLeft=0    //图归原位
    }
}

4.完整代码。

<style>
.shade{position:relative;}
</style>
<script>
var Style,offset=3,timer,dir=1     
//offset为图片抖动时的偏移量，dir为抖动方向
document.onmouseover=function(){   //鼠标移上对象时执行函数
    with(event.srcElement)
//如果鼠标移上的对象是图片，并且class为shade，执行下面的代码
       if(tagName=="IMG"&&className=="shade"){         
//将变量Style的赋值为对象的CSS对象，方便下面写代码(简短)
           Style=style
           shade()       //调用shade函数
       }
}
document.onmouseout=function(){//鼠标在对象上移开时执行函数
    if(Style){    //如果是之前抖动的图片对象，执行下面的代码
       clearTimeout(timer)      //清除计时器以停止图片的抖动
       Style.posTop=Style.posLeft=0    //图归原位
    }
}
function shade(){
/*先实现dir的自加：如果dir小于4，自增1，等于4时重设为1 ,然后根据它的值判断应该改变对象X或Y坐标的值(1、2、3和4分别对应着向左、下、右和上四个方向的偏移运动)，eval()的功能是先进行字符串连接再执行连接后的JS代码*/
    eval("Style.pos"+["Top","Left"][(dir+=dir<4?1:-3)%2]+"+=offset*(dir-3+dir%2)") 
    timer=setTimeout("shade()",50)    //50毫秒后再次执行shade()函数
}                                      
</script>
<img src="demo.gif" class="shade">

注意：设置图片为相对定位是必须的，并且在本例中的CSS类名必须为 shade。
 提示：抖动效果不止限于图片，只是在本例中限制为只允许图片。
技巧：只要把判断对象是否为图片的语句tagName=="IMG" 去掉，抖动效果就可以应用于所有class 为 shade 的对象。

特别提示
代码运行后，鼠标移到图片上，图片将依次作向左、向下、向右和向上四个方向的抖动，鼠标移开后抖动停止，图片恢复原位。效果如图 1.8.22 所示。

图 1.8.22图片抖动效果

特别说明

本例主要利用相对定位的对象的特性来作抖动效果。核心部分的代码是eval 方法、三目运算和求模运算的应用。
1. eval 检查 JavaScript 代码并执行。
2. 测试条件?语句1:语句2 三目运算符，根据测试条件的真或假分别执行语句2或语句2。
3. number1%number2 求模运算 返回 number1 除以 number2 所得的余数。