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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
php str_pad 函数用法简介
2009/07/11 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php异常处理方法实例汇总
2015/06/24 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
详解vue v-model
2020/08/31 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python实现redis三种cas事务操作
2017/12/19 Python
使用Python进行目录的对比方法
2018/11/01 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python中图像通道分离与合并实例
2020/01/17 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
后勤副校长自我鉴定
2013/10/13 职场文书
英语商务邀请函范文
2014/01/16 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
英文邀请函
2015/02/02 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL