编程 Javascript

jQuery模拟窗口抖动效果

Posted in Javascript onMarch 15, 2017

效果图：

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, //晃动次数，4次一圈
   step = 0, //计数器
   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 }); //抖动结束回归原位
     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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jQuery模拟窗口抖动效果

- Author -

lqm123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS中剪贴板兼容性、判断复制成功或失败

Mar 09 Javascript

用javascript作一个通用向导说明

Aug 30 Javascript

javascript学习笔记（七）Ajax和Http状态码

Oct 08 Javascript

jquery.cookie.js用法实例详解

Dec 25 Javascript

深入解析JavaScript中函数的Currying柯里化

Mar 19 Javascript

基于jQuery的AJAX和JSON实现纯html数据模板

Aug 09 Javascript

JS 事件绑定、事件监听、事件委托详细介绍

Sep 28 Javascript

js实现各种复制到剪贴板的方法(分享)

Oct 27 Javascript

详解Vue.js组件可复用性的混合(mixin)方式和自定义指令

Sep 06 Javascript

使用InstantClick.js让页面提前加载200ms

Sep 12 Javascript

JavaScript学习教程之cookie与webstorage

Jun 23 Javascript

js计时事件实现圆形时钟

Mar 25 Javascript

利用jQuery实现一个简单的表格上下翻页效果

Mar 14 #Javascript

基于React实现表单数据的添加和删除详解

Mar 14 #Javascript

Node.js 中exports 和 module.exports 的区别

Mar 14 #Javascript

JS检测数组类型的方法小结

Mar 14 #Javascript

轻松理解JavaScript闭包

Mar 14 #Javascript

微信小程序页面跳转及数据传递详解

Mar 14 #Javascript

JavaScript ES6中export、import与export default的用法和区别

Mar 14 #Javascript