手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript抖动元素的小例子
javascript抖动元素的小例子
摘要:复制代码代码如下: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清空table表格的方法

Javascript实现飞动广告效果的方法

学习javascript文件加载优化

javascript实现树形菜单的方法

JavaScript中用sort()方法对数组元素进行排序的操作

JavaScript实现Iterator模式实例分析

javascript嵌套函数和在函数内调用外部函数的区别分析

JavaScript实现添加、查找、删除元素

javascript搜索框效果实现方法

javascript原型模式用法实例详解

精品推荐
分类导航