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>

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

Javascript 相关文章推荐
jquery parent和parents的区别分析
Oct 02 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
You might like
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
初识Node.js
2014/09/03 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python交互界面的退出方法
2019/02/16 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
同学会邀请书大全
2014/01/12 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
意向书范本
2014/07/29 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
群众路线剖析材料
2014/09/30 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书