码迷,mamicode.com
首页 > Web开发 > 详细

js 模拟css3 动画2

时间:2016-06-13 17:02:45      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

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

 

js 模拟css3 动画2

标签:

原文地址:http://www.cnblogs.com/hao123456/p/5581174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!