Efecto:
Idea:
Utilice el temporizador setInterval para el movimiento, offsetWidth para cambiar el ancho y utilice onmouseover para colocar el punto final y el DIV seleccionado en parámetros antes de almacenar en búfer el movimiento.
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
div
{
ancho: 100px;
altura: 50 píxeles;
fondo: #0000FF;
margen: 10px;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función () {
var oDiv = document.getElementsByTagName('div');
para (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //Marca un DIV para cerrar el temporizador del DIV correspondiente
oDiv[i].onmouseover = función () {
move(this, 400); //Da los parámetros de salida del temporizador
}
oDiv[i].onmouseout = función () {
mover(esto, 100);
}
}
};
función mover(div,fin) {
clearInterval(div.timer);
div.timer = setInterval(función () {
var velocidad = (fin - div.offsetWidth) / 5; // (fin - ancho restante) / factor de escala = velocidad de movimiento DIV
velocidad = velocidad > 0 ? Math.ceil(velocidad): Math.floor(velocidad); // Redondeo decimal, es decir, redondeo con acarreo;
if (div.offsetWidth == end) { //Cierra el temporizador cuando llegue al final
clearInterval(div.timer);
}
demás {
div.style.width = div.offsetWidth + speed + 'px' //Mover el ancho del DIV
}
}, 30)
}
</script>
</cabeza>
<cuerpo>
<div>
</div>
<div>
</div>
<div>
</div>
</cuerpo>