js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <scriptlanguage="JavaScript1.2"> //configureshakedegree(wherelarger#equalsgreatershake) varrector=3 ///////DONEEDITTING/////////// varstopit=0 vara=1 functioninit(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } functionrattleimage(){ if((!document.all&&!document.getElementById)||stopit==1) return if(a==1){ shake.style.top=parseInt(shake.style.top)+rector } elseif(a==2){ shake.style.left=parseInt(shake.style.left)+rector } elseif(a==3){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if(a<4) a++ else a=1 setTimeout("rattleimage()",50) } functionstoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script> </head> <bodybgcolor="#F7F7F7"> <palign="center"> <imgsrc=/images/skinslogo.gifclass="shakeimage"onMouseover="init(this);rattleimage()"onMouseout="stoprattle(this)"> <br> 鼠标移动上来看效果!</p> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。