javascript抖动元素的小例子

时间：2021-05-26

复制代码 代码如下:
<!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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章