Home > Developer > Web Develop
Multi-Object motion, motion parameters can not be common.
This article mainly introduces the JS implementation of multi-object Buffer Motion example code, the need for friends can refer to the effect:Ideas:
Using the setinterval timer for motion, the offsetwidth realizes the width change, in the onmouseover the end point and the selected div into the parameters and then the buffer movement.
Code:
The code is as follows:<Headrunat= "Server"> <title></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; //to buy a div to mark, to close the corresponding DIV timerOdiv[i].onmouseover= function() {Move ( This, -); //give timer output parameters} odiv[i].onmouseout= function() {Move ( This, -); } } }; functionMove (Div, end) {clearinterval (Div.timer); Div.timer=SetInterval (function () { var Speed=(End-div.offsetwidth)/ 5; //(end-width to go)/zoom factor =div speed of movement Speed= Speed> 0 ?Math.ceil (Speed): Math.floor (speed); //decimal rounding, i.e. rounding if(Div.offsetwidth==end) { //turn off the timer when you reach the end pointclearinterval (Div.timer); } Else{div.style.width=Div.offsetwidth+ Speed+ 'px'; //Move the width of the div } }, -) } </Script></Head><Body> <Div> </Div> <Div> </Div> <Div> </Div></Body>
JS realization of multi-object width Buffer Motion 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
