原生JS封裝時間運動函數
/*講時間運動之前先給大家復習一下運動函數
通常大家都會寫運動框架，一個定時器(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);
}
經過測試都是沒問題的
原生JS封裝時間運動函數