Home > Developer > JavaScript
Effect:
Ideas:
The setInterval timer is used for motion. offsetWidth is used to change the width. onmouseover is used to place the endpoint and the selected DIV into the parameter and then buffer the motion.
Code:
Copy codeThe Code is as follows:
<Head runat = "server">
<Title> </title>
<Style type = "text/css">
Div
{
Width: 100px;
Height: 50px;
Background: # 0000FF;
Margin: 10px;
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oDiv = document. getElementsByTagName ('div ');
For (var I = 0; I <oDiv. length; I ++ ){
ODiv [I]. timer = null; // mark a DIV to disable the timer of the corresponding DIV.
ODiv [I]. onmouseover = function (){
Move (this, 400); // outputs parameters to the timer
}
ODiv [I]. onmouseout = function (){
Move (this, 100 );
}
}
};
Function move (div, end ){
ClearInterval (div. timer );
Div. timer = setInterval (function (){
Var speed = (end-div. offsetWidth)/5; // (end-width to be taken)/zoom factor = DIV moving speed
Speed = speed> 0? Math. ceil (speed): Math. floor (speed); // decimal number, that is, carry number.
If (div. offsetWidth = end) {// close the timer when the end is reached
ClearInterval (div. timer );
}
Else {
Div. style. width = div. offsetWidth + speed + 'px '; // move the DIV width
}
}, 30)
}
</Script>
</Head>
<Body>
<Div>
</Div>
<Div>
</Div>
<Div>
</Div>
</Body>
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
