快捷導(dǎo)航

jQuery模擬窗口抖動(dòng)效果

更新時(shí)間：2017年03月15日 08:50:14 作者：lqm123

本文主要介紹了jQuery模擬窗口抖動(dòng)效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>jQuery模擬窗口抖動(dòng)</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="模擬窗口抖動(dòng)" />
 <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, //晃動(dòng)的距離，單位像素
   c = 16, //晃動(dòng)次數(shù)，4次一圈
   step = 0, //計(jì)數(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 }); //抖動(dòng)結(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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用jquery獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘query獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JQuery 學(xué)習(xí)筆記選擇器之二
本章繼續(xù)我們的JQuery選擇器的學(xué)習(xí)旅程首先照上一章一樣，提供我學(xué)習(xí)用的例子
2009-07-07
關(guān)于hashchangebroker和statehashable的補(bǔ)充文檔
我覺得之前寫的兩篇隨筆有點(diǎn)不負(fù)責(zé)任，完全沒寫明白，補(bǔ)充了一份文檔（權(quán)且算是文檔吧=.=）
2011-08-08
jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表,結(jié)合具體實(shí)例形式分析了jQuery日期時(shí)間運(yùn)算構(gòu)造級(jí)聯(lián)下拉列表相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
jquery UI Datepicker時(shí)間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件沖突問題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery如何實(shí)現(xiàn)點(diǎn)擊頁面獲得當(dāng)前點(diǎn)擊元素的id或其他信息
點(diǎn)擊頁面獲得當(dāng)前點(diǎn)擊元素的id或者其他信息，使用jquery可以輕松做到這一點(diǎn)，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助
2014-01-01
基于jQuery的獲得各種控件Value的方法
jQuery獲得各種控件Value的方法，使用jquery的朋友可以參考下。
2010-11-11
jQuery中offset()方法用法實(shí)例
這篇文章主要介紹了jQuery中offset()方法用法,實(shí)例分析了offset()方法的功能、定義及返回或設(shè)置所匹配元素相對(duì)于document對(duì)象的偏移量時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
用jQuery的AJax實(shí)現(xiàn)異步訪問、異步加載
這篇文章主要介紹了用jQuery的AJax實(shí)現(xiàn)異步訪問、異步加載，jQuery的ajax異步實(shí)現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者參考,需要的朋友可以參考下
2016-11-11