JavaScript implementation code to create motion framework_Basic knowledge

The encapsulated motion framework Move(obj,attr,iTarget) can be called directly:

Can be used to set variable speed changes of many common attribute values ​​such as width, border, fontSize, marginLeft, opacity, etc. to achieve various interesting effects.

Compatible with IE and FF.

Copy code The code is as follows:

/********************
*
* 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
}
}