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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
Javascript的比较汇总
Jul 25 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
详解jQuery事件
2017/01/13 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
大课间活动实施方案
2014/03/06 职场文书
文明班集体申报材料
2014/05/23 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
违纪学生保证书
2015/02/27 职场文书
python基础之类属性和实例属性
2021/10/24 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python
优化Mysql查询的示例
2022/04/26 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle