javascript抖动元素的小例子


Posted in Javascript onOctober 28, 2013
 <!doctype html>
 <html lang="zh">
 <head>
     <meta charset="utf-8">
     <title>xxxxxx</title>
     <style>
     #control {
         height: 100px;
         width: 100%;
         background: gray;
     }
     </style>
     <script>
     function shake(e, onComplete, distance, interval)
     {
         if (typeof e === "string")
         {
             e = document.getElementById(e);
         } // end if
         distance = distance || 8;
         interval = interval || 800;
         var originalStyle = e.style.cssText;
         e.style.position = "relative";
         var start = (new Date()).getTime();
         animate();
         function animate()
         {
             var now = (new Date()).getTime();
             var elapsed = now - start;
             var progress = elapsed / interval;
             if (progress < 1)
             {
                 var y = distance * Math.sin(Math.PI * progress * 4);
                 var x = distance * Math.cos(Math.PI * progress * 4);
                 e.style.left = x + "px";
                 e.style.top = y + "px";
                 console.log(e.style.cssText);
                 setTimeout(animate, Math.min(25, elapsed));
             } // end if
             else
             {
                 e.style.cssText = originalStyle;
                 if (onComplete)
                 {
                     onComplete(e);
                 } // end if
             } // end else
         } // end animate()
     } // end shake()
     </script>
 </head>
 <body>
     <div id="control" onclick="shake(this);">
     </div>
 </div>
 </body>
 </html>
Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
replace()方法查找字符使用示例
Oct 28 #Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 #Javascript
Document:getElementsByName()使用方法及示例
Oct 28 #Javascript
JS截取字符串常用方法详细整理
Oct 28 #Javascript
js自动生成对象的属性示例代码
Oct 28 #Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 #Javascript
javascript:void(0)的作用示例介绍
Oct 28 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python实现kmp算法的实例代码
2019/04/03 Python
python基础教程之while循环
2019/08/14 Python
python常用排序算法的实现代码
2019/11/08 Python
python列表推导式入门学习解析
2019/12/02 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python模块内置属性概念及实例
2021/02/18 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
实习自我鉴定模板
2013/09/28 职场文书
优秀党员主要事迹
2014/01/19 职场文书
运动会横幅标语
2014/06/17 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
婚宴主持词
2015/06/30 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python