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="0px;height:1000px;border-left:1px black solid; 118 position:absolute;top:0px;left:500px;"></div> 119 </body> 120 </html>