jQuery模擬窗口抖動效果
更新時間：2017年03月15日 08:50:14 作者：lqm123
本文主要介紹了jQuery模擬窗口抖動效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery模擬窗口抖動</title>
<style type="text/css">
input{margin-top: 20px;}
.center{margin-left: 50%;transform: translate(-50%);}
.img{display:block;position:absolute;top:100px;}
</style>
</head>
<body>
<img src="http://mpic.tiankong.com/60b/994/60b994dc105a7b76b25e116733a142e9/431-0248.jpg" class="img center" />
<input type="button" class="center" value="模擬窗口抖動" />
<script src="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, //晃動次數(shù)，4次一圈
step = 0, //計數(shù)器
img = $("img"),
off = img.offset();
this.step = 0;
timer = setInterval(function () {
var set = pos();
img.offset({ top: off.top + set.y * len, left: off.left + set.x * len });
if (step++ >= c) {
img.offset({ top: off.top, left: off.left }); //抖動結(jié)束回歸原位
clearInterval(timer);
}
// console.log(step)
}, 45);
});
function pos() {
this.step = this.step ? this.step : 0;
this.step = this.step == 4 ? 0 : this.step;
var set = {
0: { x: 0, y: -1 },
1: { x: -1, y: 0 },
2: { x: 0, y: 1 },
3: { x: 1, y: 0 }
}
return set[this.step++];
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
使用jquery真的很方便，比如要控制div的顯示與隱藏，一句話就搞定了，請看下面使用說明。2011-07-07
這篇文章主要介紹了使用jquery做的一個簡單的屏幕鎖定提示框,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jQuery事件用法實例匯總,對事件的綁定及各類事件的用法做了較為詳盡的實例分析,有很好的借鑒價值,需要的朋友可以參考下2014-08-08
基于jQuery Circlr插件實現(xiàn)產(chǎn)品圖片360度旋轉(zhuǎn)
Circlr是一款可以對產(chǎn)品圖片進(jìn)行360度全方位旋轉(zhuǎn)展示的jQuery插件，本文給大家分享一款基于jQuery Circlr插件實現(xiàn)產(chǎn)品圖片360度旋轉(zhuǎn)，大家一起來看看吧2015-09-09
基于jquery的滾動鼠標(biāo)放大縮小圖片效果，需要的朋友可以參考下。2011-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)Tabs選項卡自定義插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
利用jQuery插件擴(kuò)展識別瀏覽器內(nèi)核與外殼的類型和版本的實現(xiàn)代碼
在平時的B/S開發(fā)中，經(jīng)常需要知道瀏覽器的內(nèi)核類型和版本，甚至，有時還需要知道瀏覽器的外殼類型和版本2011-10-10
這篇文章主要為大家詳細(xì)介紹了jquery自定義表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery實現(xiàn)下滑菜單導(dǎo)航效果代碼,通過jquery操作鼠標(biāo)事件及頁面樣式動態(tài)操作實現(xiàn)下滑菜單導(dǎo)航功能,非常具有實用價值,需要的朋友可以參考下2015-08-08