/*讲时间运动之前先给大家复习一下运动函数
通常大家都会写运动框架，一个定时器(Timer),一个步长(step 就是每次运动的距离)，一个当前位置(current)一个目标位置(target),然后判断一下当前位置加上步长和目标位置的关系就可以了
就可以了。
简写就是这样呗*/
var obj=document.getElementById("div");
/*想要获取元素当前的位置,是要获取CSS的，obj.style.left="25"px;这样是OK的，没有问题，
但是如果你这么写 var left=obj.style.left;是获取不到的，CSS的获取，需要用到方法*/
function getCSS(obj,attr){
/*window.getComputedStyle 兼容标准浏览器 谷歌 火狐 苹果浏览器
currentStyle 是兼容IE的*/
return window.getComputedStyle?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
/*attr 是要改变的元素属性(left或者top);
step的正负决定运动方向*/
function move(obj,target,step,attr)
{
var timer=null,current=0;
clearInterval(timer);
timer=setInterval(function(){
current=parseFloat(getCSS(obj,attr));//去掉单位px
if((current+step-target)*step<0) //运动向下或者向上都满足这个条件
{
obj.style[attr]=current+step+"px";
}
else{
obj.style[attr]=target+"px";
clearInterval(timer);
}
},1000/60);
}
时间运动函数
function getCSS(obj,attr){
return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
function $(id){return document.getElementById(id);}
/*时间运动主要依赖一个公式 变化的时间/总时间=变化的位移/总位移
当比值为1的时候，运动就结束了呗！
变化的时间=当前时间-初始的时间
变化的位置=当前位置-初始位置
每次移动的位移=（变化的时间/总时间)*总位移
*/
function move(obj,attr,time,target)
{
var current=parseFloat(getCSS(obj,attr));//获取当前位置
var startTime=new Date();//获取当前时间
var offset=target-current;//总偏移量，总位移
var changeTime=0;//变化的时间
obj.timer=null;
clearInterval(obj.timer);//使用定时器之前清除一下，只是一个良好的习惯，避免多次产生定时器
obj.timer=setInterval(function(){
changeTime=(new Date()-startTime);//变化的时间
var t=changeTime/time;//变化的时间/总时间
if(t>=1){
obj.style[attr]=target+"px";
clearInterval(obj.timer);
}
else{
obj.style[attr]=current+t*offset+"px";
}
},1000/60);
}
经过测试都是没问题的