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 datepicker 使用方法
May 20 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
实现高性能javascript的注意事项
May 27 Javascript
js仿360开机效果
Dec 26 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
jquery插件懒加载的示例
Oct 24 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP设置进度条的方法
2015/07/08 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
小程序实现多选框功能
2018/10/30 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python3 中文文件读写方法
2018/01/23 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
《童趣》教学反思
2014/02/19 职场文书
农村婚礼主持词
2014/03/13 职场文书
战友聚会主持词
2014/04/02 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Nginx如何配置根据路径转发详解
2022/07/23 Servers