您的位置：首页 > Web前端 > CSS

js 模拟css3 动画2

2016-06-13 16:42 513 查看

<html>
<head>
<title> javaScript缓动入门 </title>
</head>
<body>
<style type=text/css>
#taxiway {
background: #e8e8ff; width: 800px; height: 100px
}
#move {
background: #a9ea00; width:100px; height:98px; border:1px solid red
}
</style>
<div id="taxiway">
<div id="move" style="position: absolute; left: 50" onClick="Run()"></div>
</div>
<p class=notice display="text-align:center">点击可移动绿色方块</p>
</body>
<script>
var Tween = {
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
}
}

//b:div之样式left初值，c:div要移动的距离，d：div在时间d内完成移动，t:时间
var b=50,c=650,d=100,t=0;
function Run(){
move.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";
if(t<d){ t++; setTimeout(Run, 10); }
}
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航