javascript抖动元素的小例子
2013-10-28 00:00
573 查看
<!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>
相关文章推荐
- js之事件冒泡和事件捕获详细介绍
- js中的replace方法使用介绍
- 使用js的replace()方法查找字符示例代码
- JS 页面计时器示例代码
- Javascript实现页面跳转的几种方式分享
- java response对象返回js代码
- js 客户端与服务器端的通信
- Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则
- JS简单实现一键回顶功能
- js isArray
- JavaScript变量声明提前
- 读《JavaScript.The.Good.Parts》的一些笔记
- JavaScript跨域总结与解决办法
- js闭包的用途
- An introduction to JSON
- Javascript闭包例子
- underscore.js 分析 第二天
- Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则
- 在后台 .cs 中执行前台的js 函数
- 初识jsonp