Home > Developer > Web Develop
JS Buffer Motion code example:
Elements of the buffer movement is more beautiful than uniform motion, because it appears more tension and elasticity, of course, for the browser may have a better effect, then the possibility of retaining users is even greater, the following code examples of how to achieve this effect.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Div{width:100px;Height:50px;background:#0000FF;margin:10px;}</style><Scripttype= "Text/javascript">window.onload=function(){ varOdiv=document.getElementsByTagName ('Div'); for(varI=0; I<Odiv.length;i++) {Odiv[i].timer=NULL; Odiv[i].onmouseover=function() {Move ( This, -); } odiv[i].onmouseout=function() {Move ( This, -); } }};functionMove (div,end) {clearinterval (Div.timer); Div.timer=SetInterval (function(){ var Speed=(End-div.offsetwidth)/ 5; speed= Speed>0?Math.ceil (Speed): Math.floor (speed); if(Div.offsetwidth==end) {clearinterval (Div.timer); } Else{div.style.width=Div.offsetwidth+ Speed+'px'; } }, -)}</Script></Head><Body><Div></Div><Div></Div><Div></Div></Body></HTML>
Although the above code is not a div movement, but from the length of the div can still see the buffering effect, the principle is the same.
A. Code Comment:
1.window.onload=function () {}, when the secure content is fully loaded, the code in the function is executed.
2.var odiv=document.getelementsbytagname (' div ') to get a collection of div objects.
3.for (var i=0;i<odiv.length;i++) {}, traversing each Div object in the Div object collection.
4.oDiv. Timer=null, which is the top of a timer property for a Div object, and assigns a value of NULL to hold the return value of the setinterval () function.
5.odiv.onmouseover=function () {move (this,400);}, register the onmouseover event handler for the Div object.
6.odiv.onmouseout=function () {move (this,100);}, register the onmouseout event handler for the Div object.
7.function Move (div,end) {}, this function is the core of the buffered motion, has two parameters, the first parameter is the Div object, and the second is the final div length to set.
8.clearInterval (Div.timer), stop running the timer function on the current DIV, without this code, may cause motion acceleration or motion confusion.
9.div.timer=setinterval (function () {},30), use the Timer function to perform an anonymous function every millisecond.
10.var speed= (end-div.offsetwidth)/5, set the motion "speed", here the so-called speed is actually the width increases or decreases the amplitude, along with the movement, speed's value also is changing.
11.speed=speed>0? Math.ceil: Math.floor (Speed), a mathematical operation, is not introduced here.
12.if (div.offsetwidth==end) {clearinterval (Div.timer);}, if the target length is reached, the execution of the timer function is stopped.
13.div.style.width=div.offsetwidth+speed+ ' px ', otherwise continue to set the width of the div.
Two. Related reading:
The 1.math.ceil () function can refer to the ceil () method section of the JavaScript Math object .
the 2.math.floor () function can be found in the Math.floor () method section of JavaScript .
The 3.setInterval () function can be found in the setinterval () Function usage section.
the 4.clearInterval () function can be found in the Clearinterval () Method section of the Window object .
the 5.offsetWidth properties can be found in the section scrolltop, Offsetheight, and offsettop for a detailed description of property usage .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10780
For more information, refer to: http://www.softwhy.com/javascript/
JS Buffer Motion code example
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
