Effect:
Ideas:
Using the setinterval timer for movement, offsetwidth to realize the width of the change, in the onmouseover with the end point and the selected div into the parameters of the buffer movement.
Code:
Copy Code code as follows:
<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; A tag to buy a div to turn off the timer for the corresponding Div
Odiv[i].onmouseover = function () {
Move (this, 400); Output 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 point-the width to go)/scaling factor =div moving speed
Speed = speed > 0? Math.ceil (Speed): Math.floor (speed); Decimal rounding, that is, carrying rounding.
if (Div.offsetwidth = end) {//Shutdown Timer when destination is reached
Clearinterval (Div.timer);
}
else {
Div.style.width = div.offsetwidth + speed + ' px '; Move the width of the div
}
}, 30)
}
</script>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
