Wirkung:
Idee:
Laden Sie zunächst onscroll, um die Bildlaufleiste zu steuern. Schreiben Sie dann die Methode zum Puffern von Bewegungen. Die Methode zum Puffern von Bewegungen besteht darin, zunächst die Geschwindigkeit des DIV-Puffers zu berechnen, sie aufzurunden und dann eine Bewegung auszuführen, um zu bestimmen, wann der Endpunkt erreicht ist. Geben Sie schließlich seine Parameter zurück. Rufen Sie dann diese Methode in Onscroll auf, berechnen Sie den Endpunkt und weisen Sie ihn den Parametern dieser Methode zu.
Code:
Kopieren Sie den Codecode wie folgt:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
Breite: 200px;
Höhe: 200px;
Hintergrund: #0000FF;
Position: absolut;
rechts: 0;
unten: 0;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop ||. document.body.scrollTop; //Ermitteln Sie die Bewegungshöhe
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); // Rufen Sie die Parameter auf, und die Parameter darin sind die Endpunkte des DIV. Das ist (visuelle Höhe – DIV-Höhe) / 2 + mobile Höhe
};
var timer = null;
Funktion move(end) {
clearInterval(timer); //Zuerst das zuvor geöffnete setInterval schließen;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //Berechnen Sie die Geschwindigkeit von DIV. Die Geschwindigkeit von DIV ist gleich (end point - offsetTop height) / Skalierungsfaktor
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Um Dezimalstellen zu vermeiden, runden Sie es auf eine ganze Zahl
if (oDiv.offsetTop == end) { //Wenn der DIV das Ende erreicht, setInterval schließen;
clearInterval(timer);
}
anders {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //Div verschieben
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>