Effet:
Idée:
Utilisez la minuterie setInerval() pour effectuer l'exercice. Ensuite, le point clé est de lui donner un jugement pour combler le vide lorsqu'il s'arrêtera finalement.
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
#div1
{
largeur : 100 px ;
hauteur : 100px ;
arrière-plan : #0000FF ;
position : absolue ;
gauche : 800px ;
haut : 100 px ;
}
#div200
{
largeur : 1px ;
hauteur : 400px ;
arrière-plan : #FF0000 ;
position : absolue ;
gauche : 200px ;
}
#div500
{
largeur : 1px ;
hauteur : 400px ;
arrière-plan : #FF0000 ;
position : absolue ;
gauche : 500px ;
}
</style>
<script type="text/javascript">
fonction déplacer (fin) {
var oDiv = document.getElementById('div1');
var minuterie = nul ;
minuterie = setInterval (fonction () {
var speed = (end - oDiv.offsetLeft) / 5 //Obtenir la vitesse de déplacement en fonction du point final et de offsetLeft
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Arrondi, la décimale devient un entier,
// si (oDiv.offsetLeft <= fin) {
// clearInterval(minuterie);
// }
// autre {
// oDiv.style.left = oDiv.offsetLeft + vitesse + 'px' ;
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //Parce qu'il y aura un petit écart à la fin lors de l'arrêt, ou qu'il n'atteint pas complètement l'endroit désigné, il devrait donc être inférieur à sa vitesse
clearInterval(timer); //Lorsque la distance est inférieure à la vitesse, arrêtez le chronomètre
oDiv.style.left = end + 'px'; //Remplissez le vide après l'arrêt.
}
autre {
oDiv.style.left = oDiv.offsetLeft + vitesse + 'px' //Déplacer DIV
}
}, 30)
}
</script>
</tête>
<corps>
<input type="button" id="btn1" value="À la position 500" onclick="move(500);"
<input type="button" id="btn2" value="À la position 200" onclick="move(200);"
<identifiant div="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</corps>