怎么实现鼠标移上时图片抖动的效果
解决思路：
所谓抖动，就是对象在X和Y坐标上绕着一个中心位置作上下左右运行，也就是对象在相对定位时的left和top属性值的变化。
具体步骤：
1.插入要作为抖动的图片，并在CSS中定义它的定位方式。
.shade{position:relative;}
</style>
<img src="http://news.woogood.com/Get/0510/0510616445728302.gif"
2.捕捉发生在抖动图片上的 onmouseover 事件，并调用用于抖动图片的功能函数。
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.在鼠标移开抖动图片时停止抖动。
if(Style){ //如果是之前抖动的图片对象，执行下面的代码
clearTimeout(timer) //清除计时器以停止图片的抖动
Style.posTop=Style.posLeft=0 //图归原位
}
}
4.完整代码。
.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="http://news.woogood.com/Get/0510/0510616445728302.gif"
注意：设置图片为相对定位是必须的，并且在本例中的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 所得的余数。 
tom.com