1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 #box{
12 width: 50px;
13 height: 50px;
14 background: red;
15 position: absolute;
16 }
17 </style>
18
19 <!--引入 tween.js-->
20 <script type="text/javascript" src="js/tween.js"></script>
21
22 </head>
23 <body>
24 <div id="box"></div>
25 </body>
26 <script type="text/javascript">
27
28 var box = document.getElementById("box");
29 var originLeft = box.offsetLeft;
30 box.style.width = "500px";
31 // 定义变量 记录 left 增加的值
32 // var leftAdd = 0;
33 // var timer = setInterval(function(){
34 // leftAdd += 5;
35 // box.style.left = originLeft + leftAdd + "px";
36 // if(leftAdd == 600){
37 // clearInterval(timer);
38 // }
39 // },30);
40
41 /*可以改进的地方
42 * 1、可以增加速率曲线
43 * 2、可以支持低端设备
44 * 3、想要一些特殊效果（回弹效果）
45 */
46
47 // 当前时间（但是并不是ms，s 等）
48 var t = 0;
49 // 初始值
50 var b = originLeft;
51 // 变化量
52 var c = 400;
53 // 持续时间
54 var d = 50;
55
56 var timer = setInterval(function(){
57 t++;
58 if(t>=d){
59 clearInterval(timer);
60 }
61 box.style.width = Tween.Linear(t,b,c,d) + "px";
62
63 },20);
64 </script>
65 </html>