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