javascript完美運動

2021-09-13 10:50:31 字數 1284 閱讀 5390

前面的運動,每次只能改乙個值,你改div的width的時候,就不能改div的高度,改高度的時候就不能改寬度,如果我的運動想同時改寬度和高度,怎麼實現?

在這裡我們把屬性和目標值用json實現。

在這個完美運動框架中,我們可以只讓乙個物體的乙個屬性運動,可以鏈式呼叫,也可以幾個屬性同時運動。能解決我們專案中遇到的大部分運動。

function getstyle(obj,name)

else

}function startmove(obj, json, fnend)

else

var speed = (json[attr] - cur) / 6;

speed = speed > 0 ? math.ceil(speed) : math.floor(speed);

if (cur === json[attr]) else else}}

}, 30)

}

如果我們直接按照上面的方式,當我們執行下面**的時候

startmove(odiv,);
發現頁面是有問題的,why?

if (cur === json[attr])
我們發現width先執行完成,當乙個屬性執行完成之後我們就關掉了定時器,所以沒有達到我們預期的效果。我們看看怎麼解決。

我們可以判斷當所有值都達到目標點的時候在結束運動。

function getstyle(obj,name)

else

}function startmove(obj, json, fnend)

else

var speed = (json[attr] - cur) / 6;

speed = speed > 0 ? math.ceil(speed) : math.floor(speed);

if(cur!=json[attr])

if(attr==="opacity")else

}if (bstop)

}, 30)

}

到目前為止,我們可以在任何地方用我們的運動框架做運動效果。

完美運動框架

1.勻速運動 1 2 param obj 待改變的物件 3 param json 待改變的屬性列表 4 return func 鏈式呼叫 5 6 functionstartmove obj,json,func else 25 26 勻速運動 27 var ispeed 10 28 29 if icu...

完美運動框架

1.勻速運動 1 2 param obj 待改變的物件 3 param json 待改變的屬性列表 4 return func 鏈式呼叫5 6function startmove obj,json,func else 2526 勻速運動 27var ispeed 10 2829 if icur it...

javascript 運動函式

本人的水平比較菜,如有錯誤,非常高興指導 function getstyle obj,attr function startmove obj,attr,itarget 30 注 obj 控制移動的目標元素 attr控制目標元素的left 值和right的值 移動的話一般是left值或者是right值...