Effet:
Idée:
Utilisez la minuterie setInterval pour le mouvement, offsetWidth pour modifier la largeur et utilisez onmouseover pour mettre le point final et le DIV sélectionné dans les paramètres avant de mettre le mouvement en mémoire tampon.
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
div
{
largeur : 100 px ;
hauteur : 50px ;
arrière-plan : #0000FF ;
marge : 10px ;
}
</style>
<script type="text/javascript">
window.onload = fonction () {
var oDiv = document.getElementsByTagName('div');
pour (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //Marquer un DIV pour fermer le timer du DIV correspondant
oDiv[i].onmouseover = fonction () {
move(this, 400); //Donne les paramètres de sortie du minuteur
}
oDiv[i].onmouseout = fonction () {
déplacer (ceci, 100);
}
}
} ;
fonction déplacer (div, fin) {
clearInterval(div.timer);
div.timer = setInterval(fonction () {
var speed = (end - div.offsetWidth) / 5; // (fin - largeur à parcourir) / facteur d'échelle = vitesse de déplacement du DIV
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Arrondi décimal, c'est-à-dire arrondi avec report
if (div.offsetWidth == end) { //Ferme le minuteur lorsque la fin est atteinte
clearInterval(div.timer);
}
autre {
div.style.width = div.offsetWidth + speed + 'px'; //Déplacer la largeur du DIV
}
}, 30)
}
</script>
</tête>
<corps>
<div>
</div>
<div>
</div>
<div>
</div>
</corps>