javascript抖动元素的小例子
javascript抖动元素的小例子
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:xxxxxx#control{height:100px;width:100%;background:gray;}funct...

复制代码 代码如下:

<!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">

</div>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类