<>强效果图:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> jQuery模拟窗口抖动& lt;/title>
& lt;风格类型=" text/css "比;
输入{margin-top: 20 px;}
.center {margin-left: 50%;变换:翻译(-50%);}
img{显示:块;位置:绝对;最高:100 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; img src=" http://mpic.tiankong.com/60b/994/60b994dc105a7b76b25e116733a142e9/431 - 0248. - jpg”类=癷mg中心”/比;
& lt;输入类型=鞍磁ァ崩?爸行摹奔壑?" https://www.yisu.com/zixun/模拟窗口抖动”/比;
& lt;脚本src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(":按钮”)。点击(函数(){
var len=4,//晃动的距离,单位像素//c=16日晃动次数,4次一圈
一步=0,//计数器
img=$ (img),=img.offset ();
这一点。一步=0;
计时器=setInterval(函数(){
var设置=pos ();
img。抵消({:off.top + set.y * len,左:off.left + set.x * len});
如果(步骤+ +祝辞=c) {
img。抵消({:off.top,左:off.left});//抖动结束回归原位
clearInterval(计时器);
}//console.log(步骤)
},45岁);
});
函数pos () {
这一点。=这一步。一步& # 63;这一点。一步:0;
这一点。=这一步。一步==4 & # 63;0:this.step;
var设置={
0:{x: 0 y: 1},
1:{x: 1, y: 0},
2:{x: 0 y: 1},
3:{x: 1, y: 0}
}
返回设置(this.step + +);
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
