Wirkung:
Idee:
Verwenden Sie den setInerval()-Timer, um eine Übung durchzuführen. Dann kommt es darauf an, ihm ein Urteil zu geben, um die Lücke zu schließen, wenn es endlich aufhört.
Code:
Kopieren Sie den Codecode wie folgt:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
Breite: 100px;
Höhe: 100px;
Hintergrund: #0000FF;
Position: absolut;
links: 800px;
oben: 100px;
}
#div200
{
Breite: 1px;
Höhe: 400px;
Hintergrund: #FF0000;
Position: absolut;
links: 200px;
}
#div500
{
Breite: 1px;
Höhe: 400px;
Hintergrund: #FF0000;
Position: absolut;
links: 500px;
}
</style>
<script type="text/javascript">
Funktion move(end) {
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function () {
var speed = (end - oDiv.offsetLeft) / 5; //Ermitteln Sie die Bewegungsgeschwindigkeit basierend auf dem Endpunkt und offsetLeft
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Übertragsrundung, die Dezimalstelle wird eine ganze Zahl,
// if (oDiv.offsetLeft <= end) {
// clearInterval(timer);
// }
// anders {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //Weil beim Stoppen am Ende eine kleine Lücke entsteht oder der vorgesehene Ort nicht vollständig erreicht wird, sollte er daher geringer als seine Geschwindigkeit sein
clearInterval(timer); //Wenn die Distanz geringer ist als die Geschwindigkeit, stoppen Sie den Timer
oDiv.style.left = end + 'px'; // Fülle die Lücke nach dem Stoppen.
}
anders {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //Move DIV
}
}, 30)
}
</script>
</head>
<Körper>
<input type="button" id="btn1" value="To the position of 500" onclick="move(500);" />
<input type="button" id="btn2" value="To the position of 200" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>