モーションフレームワークを作成するためのJavaScript実装コード_基礎知識

カプセル化されたモーション フレームワーク Move(obj,attr,iTarget) は直接呼び出すことができます:

幅、境界線、fontSize、marginLeft、不透明度などの多くの一般的な属性値の可変速度変更を設定して、さまざまな興味深い効果を実現するために使用できます。

IEおよびFFと互換性があります。

コードをコピー コードは次のとおりです:

/********************
*
* IE-BUG:
* In IE, when setting the opacity attribute, the opacity attribute needs to be set in the element style before it can be read. to the opacity value.
*
* obj: element object. attr: attribute name surrounded by quotes. iTarget: attribute target value.
*
*****************/

function Move(obj,attr,iTarget){
clearInterval(obj.timer);//Close the previous timer to solve the problem of timer failure when calling multiple Move() on the same object at the same time Overlay problem. Use obj.timer to give each object that calls Move() its own timer to prevent multiple objects from using the same timer when calling Move() at the same time, causing related interference problems.
obj.timer=setInterval(function(){
var cur=0;//Create a variable to store the value of the attr attribute at each moment
if(attr=="opacity") {
                                                                                                                                                                          use using using using using opacity using FF. round (parseFloat(getStyle(obj,attr))*100); etc.) into an integer
          }
           var speed=(iTarget-cur)/10;//Create a decreasing speed speed variable to realize variable speed changes of attribute values
.
Speed=speed>0?Math.ceil(speed):Math.floor(speed);//Rounding to solve the problem that the browser ignores values ​​less than 1px and causes the end of the movement to be a few pixels short of the target value Itarget Question

                                                                                                                       ;//current The value cur plus the decreasing speed value speed

if(attr=="opacity"){

// Set the opacity attribute value

for IE and FF respectively obj.style.filter="alpha(opacity: " cur ")"; //for IE
                                                                                                                                       . Add a value to the specified attribute attr cur speed
                                                                                                                                                                                   The value of the attribute in . obj: element object. name: attribute name.
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];//for IE
}else{
return getComputedStyle(obj, false)[name];//for FF
}
}