1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <!--引入外部文件
8 <script type="text/javascript" src="js/tools.js"></script>
9 -->
10 <script type="text/javascript">
11 //获取元素样式
12 function getStyle(obj,name)
13 {
14 if(window.getComputedStyle)
15 return getComputedStyle(obj,null)[name];
16 else
17 return obj.currrntStyle[name];
18 }
19
20 //var timer;
21 /*
22 目前我们的定时器的标识由全局变量timer保存，
23 所有的执行正在执行的定时器都在这个变量中保存
24 */
25 function move(obj,attr,target,speed,callback)
26 {
27 /*
28 创建一个可以执行简单动画的函数
29 参数
30 obj 要执行动画的对象
31 attr 要执行动画的样式 比如 height top width left
32 target 执行动画的目标位置
33 speed 移动的速度
34 callback 回调函数，这个函数将会在动画执行完毕以后执行
35
36 在开启一个定时器前，如果前面已经开过定时器了把已有的定时器先关闭，
37 为了保证同一时间只能开启一个定时器，使方块速度恒定
38 */
39 clearInterval(obj.timer);
40 //获取元素目前的位置
41 var current = parseInt(getStyle(obj,attr));
42 if(current>target)
43 speed=-speed;
44 //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
45 obj.timer=setInterval(function(){
46 var oldValue=parseInt(getStyle(obj,attr));
47 var newValue=oldValue+speed;
48 if(speed<0&&newValue<target || speed>0&&newValue>target)
49 newValue=target;
50 obj.style[attr]=newValue+"px";
51
52 if(newValue==target){
53 clearInterval(obj.timer);
54 //动画执行完毕后，调用回调函数，只会调用一次，判断如果有callback就执行
55 callback && callback();
56 }
57 },10);
58 }
59 window.onload=function()
60 {
61 var box1=document.getElementById("box1");
62 var button1=document.getElementById("button1");
63 var timer;
64 button1.onclick=function(){
65 move(box1,"left",500,6);
66 };
67
68 var button2=document.getElementById("button2");
69
70 button2.onclick=function(){
71 move(box1,"left",0,5);
72 };
73 var box2=document.getElementById("box2");
74 var button3=document.getElementById("button3");
75 button3.onclick=function(){
76 move(box2,"left",500,10);
77 };
78 var button4=document.getElementById("button4");
79 button4.onclick=function(){
80 move(box2,"height",500,10);
81 move(box1,"width",500,10,function(){
82 alert("动画执行完毕~\(≧▽≦)/~啦啦啦！！！");
83 });
84 };
85 };
86 </script>
87 <style type="text/css">
88 *{
89 margin:0px;
90 padding:0px;
91 }
92 #box1{
93 width:100px;
94 height:100px;
95 background-color:skyblue;
96 position:absolute;
97 //IE没有指定的值 返回auto 其他浏览器返回0
98 left:0px;
99 }
100 #box2{
101 width:100px;
102 height:100px;
103 background-color:yellow;
104 position:absolute;
105 left:0px;
106 top:200px;
107 }
108 </style>
109 <body>
110 <button id="button1">点击按钮以后box1向右移动</button>
111 <button id="button2">点击按钮以后box1向左移动</button>
112 <button id="button3">点击按钮以后box2向右移动</button>
113 <button id="button4">测试按钮</button>
114 <br><br>
115 <div id="box1"></div>
116 <div id="box2"></div>
117 <div style="width:0px;height:1000px;border-left:1px black solid;
118 position:absolute;top:0px;left:500px;"></div>
119 </body>
120 </html>
