/*講時間運動之前先給大家復習一下運動函數

通常大家都會寫運動框架，一個定時器(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);

}

?

經過測試都是沒問題的?

?

轉載于:https://www.cnblogs.com/liveoutfun/p/8733155.html

總結

以上是生活随笔為你收集整理的原生JS封装时间运动函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。