jQuery模拟窗口抖动效果

效果图：

代码如下：

！DOCTYPE htmlhtmlhead元字符集='utf-8'/titlejQuery模拟窗口抖动/title style type=' text/CSS '输入{ margin-top : 20px；} .中心{左边距-: 50%;转换：翻译(-50%)；} .img { display:block位置：绝对；top :100 px }/style/head body img src=' http :3358 pic。天刚。com/60b/994/60b 994 DC 105 a7 b 76 b 25 e 116733 a 142 e 9/431-0248。jpg ' class=' img center '/input type=' button ' class=' center ' value='模拟窗口抖动/script src=' http :https://Ajax。aspnetcdn。com/Ajax/jQuery/jQuery-3。1 .0 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' : button ').click(function () { var len=4，//晃动的距离，单位像素c=16，//晃动次数，4次一圈step=0，//计数器img=$('img ')，off=img。offset()；这个。step=0；timer=setInterval(function(){ var set=pos()；img。偏移({ top : off。机顶盒。y * len，左转：左边一组。x * len })；if(step=c){ img。偏移({ top : off。顶部，左侧：关闭。左})；//抖动结束回归原位clearInterval(计时器);} //console.log(步骤)},45);});函数pos() { this.step=this.step？步骤：这一步=这一步=4?0 : this . stepvar set={ 0: { x : 0，y: -1 }，13: { x :-1，y: 0 }，2: { x : 0 0，y: 1 }，3: { x: 1，y : 0 0 0 } return set[this。step]；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！