閑得無聊,弄了個抖動效果,大家看看有沒有值得學習地方
<html><head><title>鼠標移至圖片后抖動的JS代碼 </title></head><BODY> <style>.shakeimage{position:relative; left:100px; top:100px;}</style> <img src=http://img.baidu.com/hi/logo/logo_93_30.gif class="shakeimage" onMouseover="shake(this,'onmouseout')" > <script language="JavaScript1.2"> var typ=["marginTop","marginLeft"],rangeN=10,timeout=20; function shake(o,end){ var range=Math.floor(Math.random()*rangeN); var typN=Math.floor(Math.random()*typ.length); o["style"][typ[typN]]=""+range+"px"; var shakeTimer=setTimeout(function(){shake(o,end)},timeout); o[end]=function(){clearTimeout(shakeTimer)}; } </script> </body></html>
創意之處:
- 調用簡單:事件="shake(this,'onmouseout')";
- 代碼簡短:函數主體程序僅僅5行代碼
- 性能高
- 邏輯清晰,便於二次開發