Home > Developer > JavaScript
A detailed description of the motion framework implemented by JavaScript:
The so-called motion framework simply means that a certain attribute value of an element can have a gradual change. The use of motion framework in the actual function has a large number of applications, the most common, such as customer service system, when dragging the scroll bar, the General customer service system can be flexible way to follow, the following is a brief introduction to how to achieve this effect:
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">#mytest{width:100px;Height:100px;Background-color:Black;}</style><Scripttype= "Text/javascript">functionMove (obj,attr,itarget) {clearinterval (Obj.timer); Obj.timer=SetInterval (function() { varcur=0; if(attr=="Opacity") { if('v' == '\v') {cur=parseint (GetStyle (obj,attr)); } Else{cur=Math.Round (parsefloat (GetStyle (obj,attr))* -); } } Else{cur=parseint (GetStyle (obj,attr)); } var Speed=(ITarget-cur)/Ten; Speed= Speed>0?Math.ceil (Speed): Math.floor (speed); if(ITarget==cur) {clearinterval (Obj.timer); } Else{cur+=Speed ; if(attr=="Opacity") {Obj.style.filter="Alpha (opacity:"+cur+")"; //For IEobj.style.opacity=cur/100; //For FF } Else{obj.style[attr]=cur+"px"; } } }, -);} functionGetStyle (obj,name) {if(obj.currentstyle) {returnObj.currentstyle[name];//For IE } Else { returngetComputedStyle (obj,false) [name];//For FF}} window.onload=function(){ varmytest=document.getElementById ("mytest"); Move (MyTest,"width", $);}</Script></Head><Body><DivID= "MyTest">Ant Tribe welcomes You</Div></Body></HTML>
The above code can be buffered to set the width of the div to 200px. Of course, you can set almost any property of an element with the move function. Here's a quick explanation of how you can achieve this effect:
I. Principle of implementation:
The original is very simple, through the timer function setinterval () constantly call a function to achieve the constant change of the element's attribute value at different speed, and finally up to the predetermined attribute value. This results in a buffering effect.
Two. Code comments:
1.function Move (obj,attr,itarget) {}, declares a function that implements the motion frame effect, which has three parameters, obj is the object to manipulate, attr represents the property value to manipulate, such as "width", ITarget represents the target property value to be reached.
2.clearInterval (Obj.timer), the function is to close the previous timer, can prevent the use of multiple timers to the same element simultaneously.
3.obj.timer=setinterval (function () {},1000), timer calls functions repeatedly.
4.var cur=0 to store the value of the current property.
5.if (attr== "opacity"), determines whether the property to be manipulated is transparency.
6.if (' V ' = = ' \v ') {}, due to the fact that the IE8 and IE8 browsers do not handle the same transparency as other standard browsers, it is necessary to make a judgment.
7. Cur=math.round (parsefloat (GetStyle (obj,attr)) *100), rounding and converting attribute values to floating-point types for the Opacity attribute value in FF is a floating-point numeric problem. Multiply by 100 to make the Opacity attribute value a percentage of IE uniform.
8.var speed= (itarget-cur)/10, creates a descending speed velocity variable. Implements the variable speed change of the property value.
9.speed=speed>0? Math.ceil: Math.floor (Speed), rounding, resolves a problem where the browser ignores a number less than 1px to cause the end of the motion to be less than a few pixels from the target value itarget.
10.if (itarget==cur) {} Stops the timer if the specified attribute value is reached.
11.cur+=speed, the property value is incremented.
12.if (attr== "opacity") {}, transparency is compatible with different browsers.
13.function GetStyle (obj,name) {}, gets the property value that specifies the execution property of the redemption.
The original address is: http://www.51texiao.cn/javascriptjiaocheng/2015/0507/886.html
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=8100
A detailed description of the motion framework implemented by JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
