Efecto:
Idea:
Primero, cargue onscroll para controlar la barra de desplazamiento. Luego escriba el método de almacenamiento en búfer. El método de almacenamiento en búfer consiste en calcular primero la velocidad del búfer DIV, redondearla y luego realizar el movimiento para determinar cuándo se alcanza el punto final. Finalmente se devuelven sus parámetros. Luego llame a este método en onscroll, calcule el punto final y asígnelo a los parámetros de este método.
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
#div1
{
ancho: 200px;
altura: 200 píxeles;
fondo: #0000FF;
posición: absoluta;
derecha: 0;
abajo: 0;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onscroll = función () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop //Obtener la altura del movimiento;
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); // Llame a los parámetros, y los parámetros internos son los puntos finales del DIV. Es decir (altura visual - altura DIV) / 2 + altura móvil
};
temporizador var = nulo;
movimiento de función (fin) {
clearInterval(timer); //Primero, cierre el setInterval previamente abierto;
temporizador = setInterval(función () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; // Calcular la velocidad de DIV La velocidad de DIV es igual a (punto final - altura de offsetTop) / factor de escala.
velocidad = velocidad > 0 ? Math.ceil(velocidad): Math.floor(velocidad); //Para evitar decimales, redondearlos;
if (oDiv.offsetTop == end) { //Cuando el DIV llegue al final, cierre setInterval;
clearInterval(temporizador);
}
demás {
oDiv.style.top = oDiv.offsetTop + speed + 'px' //Mover el div
}
}, 30);
}
</script>
</cabeza>
<estilo del cuerpo="altura: 1000px;">
<div id="div1">
</div>
</cuerpo>