代码描述:JavaScript抖动效果。JavaScript抖动效果
d抖动效果应用场景较多,比如登陆框,当输入用户名或者密码错误的时候,出现抖动效果,提示明显,且有动感,下面就是一段空元素抖动的代码实例,希望能够给大家带来一定的帮助。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js实现的元素抖动效果</title> <style type="text/css"> #control { height:100px; width:100px; background:gray; } </style> <script type="text/javascript"> function shake(e,onComplete,distance,interval){ if(typeof e==="string"){ e=document.getElementById(e); } distance=distance||8; interval=interval||800; var originalStyle=e.style.cssText; e.style.position="relative"; var start=(new Date()).getTime(); animate(); function animate(){ var now=(new Date()).getTime(); var elapsed=now-start; var progress=elapsed/interval; if(progress<1){ var y=distance*Math.sin(Math.PI*progress*4); var x=distance*Math.cos(Math.PI*progress*4); e.style.left=x+"px"; e.style.top=y+"px"; setTimeout(animate, Math.min(25, elapsed)); } else{ e.style.cssText=originalStyle; if(onComplete){ onComplete(e); } } } } window.onload=function(){ var control=document.getElementById("control"); control.onclick=function(){shake(this)} } </script> </head> <body> <div id="control"> </div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能