标签：
有些网站的登录表单倘若信息填写错误，除了会给出提示信息之外，还会让表单左右晃动以提示错误，觉得这个效果不错，便按照自己的思路写了个DEMO记录于此。
整个流程就是：
1.设置元素左右晃动的总次数
2.设置元素左右晃动的偏移量范围并且左右晃动交替进行
3.让元素开始晃动并记录次数，元素的移动可以利用绝对定位
4.最后让元素恢复到初始位置
DEMO代码
<!DOCTYPE html> <html> <head> <title>shake demo</title> <meta charset="utf-8"/> <style type="text/css"> #wrapper{ position:relative; width:300px; margin:150px auto; } #shaker{ position:absolute; left:0; width:300px; height:250px; border:1px solid #B0B0B0; border-radius:3px; box-shadow:0 0 10px #B4B4B4; } </style> <body> <div id="wrapper"> <div id="shaker"></div> </div> <script type="text/javascript"> /** *使登录表单左右摇晃的对象 */ function shaking(){ this.shaker=document.getElementById(‘shaker‘); //摇晃对象为登录表单 } shaking.prototype.generator=function(){ //生成左右摇晃的偏移量 this.offsets=new Array(); this.times=10; //登录表单左右摇晃的总次数 for(var i=0;i<this.times;i++){ var offset=Math.ceil((Math.random()+3)*3); //9=<偏移量<=12 if(i%2==0){ //向左的偏移量 this.offsets.push(offset); } else{ //向右的偏移量 this.offsets.push(-offset); } } this.scale=0; //记录目前表单已经摇晃的次数 } shaking.prototype.counter=function(){ //摇晃次数计数器函数 if(this.scale<this.times){ var offset=this.offsets[this.scale]; var position=parseInt(getComputedStyle(this.shaker)[‘left‘]); var distance=Math.abs(position)+Math.abs(offset); //表单每次摇晃需要移动的水平距离 if(offset>0){ //向右偏移 this.mover(1,distance,this); } else{ //向左偏移 this.mover(-1,distance,this); } this.scale+=1; var _this=this; //缓存当前对象 setTimeout(function(){_this.counter()},50); } else{ //表单位置复位 this.shaker.style.left=‘0px‘; } } shaking.prototype.mover=function(sign,distance){ //摇晃移动函数 var speed=sign*Math.ceil(distance*0.6); //表单移动的速度 this.shaker.style.left=parseInt(getComputedStyle(this.shaker)[‘left‘])+speed+‘px‘; distance-=Math.abs(speed); var _this=this; //缓存当前对象 if(distance>0){ setTimeout(function(){_this.mover()},10); } } var shaker=new shaking(); shaker.generator(); shaker.counter(); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/ckzhou/p/4483517.html
