JS Animation Learning (iv)

The previous section describes individually changing a single property worth the animation, starting from the introduction of multi-attribute encapsulation function, a function to deal with a variety of property values change.

First, we introduce a very important function, GetStyle (), which returns the current property value of an element. The two parameters are elements and attributes, respectively. Note the browser compatibility issues.

1 //Gets the element style private wrapper function that returns the current value of the property2 functionGetStyle (obj,attr) {3     if(Obj.currentstyle) {//IE Browser4         returnobj.currentstyle[attr];5}Else {6         returngetComputedStyle (obj,false) [attr];//Firefox Browser7     }8}

The next point is that a function implements animations that change multiple properties:

//Multi-object change style (width, height, font size, border, etc., transparency needs to be analyzed separately) speed buffer package functionfunctionStartmove (Obj,attr,target) {//element, changing the style property, reaching the target valueClearinterval (Obj.timer);//first clear the timerObj.timer=setinterval (function(){        //1. Take the current value        varicur=0;//Icur Returns the size of the object style property value        if(attr== ' opacity ') {//if the property is transparent, the return value of the transparency is a decimal of fractionIcur=math.round (parsefloat (GetStyle (obj,attr)) *100);//round function to avoid transparency values bouncing back and forth between decimals}Else{icur=parseint (GetStyle (obj,attr)); }        //2. Calculation Speed        varSpeed= (target-icur)/8;//denominator is the proportional coefficient k, adjustable speed=speed>0? Math.ceil (Speed): Math.floor (speed);//the buffer speed to take the whole, or not move to the end of the stop        //3. Detect if the motion is stopped        if(icur==target)        {clearinterval (Obj.timer); } Else {            if(attr== ' opacity ') {Obj.style.filter= ' Alpha (opacity: ' + (icur+speed) + ') ';//IE BrowserObj.style.opacity= (icur+speed)/100;//Firefox}Else{obj.style[attr]=icur+speed+ ' px '; }        }    },30)}

Let's verify by two div:

1 <style type= "Text/css" >2 #div1, #div2{3 width:200px;4 Height:200px;5 background:Red;6 Border:1px solid Black;7 Margin-bottom:10px;8}9 </style>

1 <DivID= "Div1"></Div>2 <DivID= "Div2"></Div>3 <Scripttype= "Text/javascript">4 window.onload=function(){5     varOb1=document.getElementById ('Div1');6     varOB2=document.getElementById ('Div2');7 Ob1.onmouseover=function(){8 Startmove ( This,'width', -);9     }Ten Ob1.onmouseout=function(){ One Startmove ( This,'width', $); A     } -      - Ob2.onmouseover=function(){ the Startmove ( This,'Opacity', to); -     } - Ob2.onmouseout=function(){ - Startmove ( This,'Opacity', -); +     } -     //alert (parsefloat (0.07*100)); eject 7.00000000001 instead of 7 so the parsefloat in the above program is rounded Math.Round function + } A </Script>

This makes it possible to change the width and transparency of an object through a startmove () function.

JS Animation Learning (iv)