javascript抖动元素的小例子
<!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 Object.defineProperty与proxy代理模式的使用详细分析
这篇文章主要介绍了JavaScript Object.defineProperty与proxy代理模式的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。本文将详解JS如何使用Fetch，感兴趣的可以学习一下2022-05-05
这篇文章主要介绍了JavaScript简单实现鼠标移动切换图片的方法,涉及JavaScript针对鼠标事件的响应及页面元素的动态变换技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了手机浏览器唤起微信分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
取一个DOM元素的兄弟节点,仿jQuery的siblings方法,用原生JS代码完成2011-08-08
阈值是最简单的图像分割方法,接下来将介绍五种阈值类型感兴趣的朋友可以参考下2013-01-01
Bootstrap每天必学之按钮，本文讲解的就是大家最为常用的button按钮的样式，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要为大家详细介绍了JavaScript实现页面无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
JavaScript每天必学之事件,聊一聊事件冒泡与捕获、事件冒泡的好处，感兴趣的小伙伴们可以参考一下2016-09-09
本来想用css3来实现，但后来脑袋一热就用了js，省的别人你ie怎么没效果啊！在腾讯微博app上看到的一个效果，鼠标击哪里就撕了哪里，跟撕报纸似的，任意点击左边面的灰色区域，查看效果，当时觉得很有意思，问了下高人，突然觉悟了，原来如此。。2013-05-05
最新评论