js鼠标滑过图片震动特效的方法
本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>鼠标滑过图片震动效果</title> <STYLE>.shakeimage{ POSITION:relative } </STYLE> </head> <body> <SCRIPTlanguage=JavaScript1.2> <!-- varrector=3 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> <imgclass="shakeimage"onMouseOver="init(this);rattleimage()"onMouseOut="stoprattle(this)"src="/images/csrcode.ico"border="0"style="cursor:pointer;"/> <imgclass="shakeimage"onmouseover="init(this);rattleimage()"onmouseout="stoprattle(this)"src="/images/changshi.ico" border="0"style="cursor:pointer;"/> <imgclass="shakeimage"onmouseover="init(this);rattleimage()"onmouseout="stoprattle(this)"src="/images/links.ico"border="0"style="cursor:pointer;"/> 鼠标滑过图片预览效果。 </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。