JS-封裝js讓一個div或者img的移動

標籤：tar   執行   支援   console   set   clear   cti   屬性   round   

/*
* 運動函數
* 參數：
* elem 操作的元素節點
* obj 操作的元素節點上的css屬性和css屬性值
* attr 操作的元素節點上的css屬性
* target 操作的元素節點上的css屬性的目標值
* fn 運動結束後的所要執行的函數
*/
function startMove(elem, obj, fn){
// 開定時器
clearInterval(elem.timer);
elem.timer = setInterval(function(){
// 假設每一個屬性都到達了目標值
var flag = true;
// 支援多屬性同時運動
for( var attr in obj ){
// 目標值
var target = obj[attr];
// 擷取元素當前值
var v;
if( attr == "opacity" ){
v = getStyle(elem, "opacity");
v = Math.round(v * 100);
}else{
v = parseInt(getStyle(elem, attr));
}
//console.log(v);
// 求目標值與當前值得差
var dist = target - v;
// 求步長
var speed = dist/6;
if( speed>0 ){
speed = Math.ceil(speed);// 向上取整，如果不取整，小數不是有效值，所以有可能無法到達目標值
}else{
speed = Math.floor(speed);
}
// 更新
if( attr == "opacity" ){
elem.style.opacity = (v+speed)/100;
if(/MSIE/.test(navigator.userAgent)){// 如果瀏覽器是IE，則執行相容代碼
elem.style.filter = "alpha(opacity:"+(v+speed)+")";
}
}else{
elem.style[attr] = v+speed+"px";
}
// 有某個屬性沒有達到目標值
if( v != target ){
flag = false;
}
}
// 如果已經到達目標值，則停止定時器
if( flag ){
clearInterval(elem.timer);
// 如果fn存在，則執行
if( fn ){
fn();// 執行函數
}
}
}, 30);
}

JS-封裝js讓一個div或者img的移動