使用JS"晃动"元素

浏览数：26 / 时间：2015年06月09日

有些网站的登录表单倘若信息填写错误，除了会给出提示信息之外，还会让表单左右晃动以提示错误，觉得这个效果不错，便按照自己的思路写了个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>