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列举css中所有图标的实现代码
Jul 04 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
人族 Terran 基本策略
2020/03/14 星际争霸
php MySQL与分页效率
2008/06/04 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python 如何将office文件转换为PDF
2020/09/22 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
大学生评语大全
2014/04/18 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python