Wirkung:
Idee:
Verwenden Sie den Timer „setInterval“ für die Bewegung, „offsetWidth“ zum Ändern der Breite und verwenden Sie „onmouseover“, um den Endpunkt und den ausgewählten DIV in Parameter einzufügen, bevor die Bewegung gepuffert wird.
Code:
Kopieren Sie den Codecode wie folgt:
<head runat="server">
<title></title>
<style type="text/css">
div
{
Breite: 100px;
Höhe: 50px;
Hintergrund: #0000FF;
Rand: 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; //Markieren Sie ein DIV, um den Timer des entsprechenden DIV zu schließen
oDiv[i].onmouseover = function () {
move(this, 400); //Timer-Ausgabeparameter angeben
}
oDiv[i].onmouseout = function () {
move(this, 100);
}
}
};
Funktion move(div, end) {
clearInterval(div.timer);
div.timer = setInterval(function () {
var speed = (end - div.offsetWidth) / 5; // (end - width to go) / Skalierungsfaktor = Geschwindigkeit der DIV-Bewegung
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Dezimalrundung, also Rundung mit Übertrag
if (div.offsetWidth == end) { //Schließe den Timer, wenn das Ende erreicht ist
clearInterval(div.timer);
}
anders {
div.style.width = div.offsetWidth + speed + 'px'; //Verschieben Sie die Breite des DIV
}
}, 30)
}
</script>
</head>
<Körper>
<div>
</div>
<div>
</div>
<div>
</div>
</body>