Home > Developer > Web Develop
JS implementation of the motion framework code example:
Elements of the motion effect in a large number of scenes have been applied, the most typical one is the site's customer service system, generally with the scroll bar movement, this chapter introduces JS a motion framework example, I hope to give the needs of friends to bring reference to the role.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#div1{width:100px;Height:100px;background:#0000FF;position:Absolute; Left:800px;Top:100px;}#div200{width:1px;Height:400px;background:#FF0000;position:Absolute; Left:200px;}#div500{width:1px;Height:400px;background:#FF0000;position:Absolute; Left:500px;}</style><Scripttype= "Text/javascript">varTimer=NULL;functionMove (end) {varOdiv=document.getElementById ('Div1'); Clearinterval (timer); Timer=SetInterval (function(){ var Speed=(End-odiv.offsetleft)/5; Speed= Speed>0?Math.ceil (Speed): Math.floor (speed); if(Math.Abs (End-odiv.offsetleft)<=Speed ) {clearinterval (timer); ODiv.style.left=End+'px'; } Else{oDiv.style.left=Odiv.offsetleft+ Speed+'px'; } }, -)}window.onload=function(){ varBT1=document.getElementById ("BTN1"); varBT2=document.getElementById ("btn2"); Bt1.onclick=function() {Move ( -);} Bt2.onclick=function() {Move ( $);}}</Script></Head><Body><inputtype= "button"ID= "BTN1"value= "to 500 location" /><inputtype= "button"ID= "BTN2"value= "to 200 location" /><DivID= "Div1"></Div><DivID= "div200">200</Div><DivID= "div500">500</Div></Body></HTML>
The above code to achieve our requirements, click on the corresponding button can let div move the specified location, the following through the code comments in detail the implementation of this effect, I hope to have a better understanding of friends to bring some help.
A. Code Comment:
1.var Timer=null, declares a variable to be used as the return value of the timer function setinterval (), which is critical when the stop timer function runs.
2.function Move (end) {}, this function is used to implement the motion of the Div, the parameter specifies to move the position, in this code is the Offsetleft property value.
3.var Odiv=document.getelementbyid (' Div1 '), gets an object with an id attribute value of DIV1.
4.clearInterval (timer), stop timer function execution, this is very important, otherwise it may cause multiple timer functions to execute simultaneously, causing confusion.
5.timer=setinterval (function () {},30), using the Timer function to perform an anonymous function every 30 milliseconds, the return value of the timer function can be used as an identifier for the parameters of the Clearinterval () function. To stop the execution of the timer function.
6.var speed= (end-odiv.offsetleft)/5, used to calculate the speed of the div motion, end is the position to move to, Offsetleft is the distance of the left edge of the div from the body.
7.speed=speed>0? Math.ceil: Math.floor (Speed), if the speed is greater than 0, it is rounded off with a rounding of less than 0.
8.if (Math.Abs (end-odiv.offsetleft) <=speed), to determine whether it is in the end of the target location, in fact, the value of offsetleft can never reach our stated value, because the speed of the value can not reach 0, The limit is 1 or-1.
9.clearInterval (timer), stop the execution of the timer function.
10.odiv.style.left=end+ ' px ' to set the Left property value of the div to the specified value.
11.odiv.style.left=odiv.offsetleft+speed+ ' px ', sets the Left property value 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 .
6.offsetLeft properties can be found in the usage section of properties such as Offsetleft, ClientLeft, and ScrollLeft .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10782
For more information, refer to: http://www.softwhy.com/javascript/
JS implementation of the motion framework 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
