Efeito:
Ideia:
Primeiro, carregue o onscroll para controlar a barra de rolagem. Em seguida, escreva o método de buffer do movimento. O método de buffer do movimento é primeiro calcular a velocidade do buffer DIV, arredondá-la e, em seguida, executar o movimento para determinar quando o ponto final é alcançado. Finalmente retorne seus parâmetros. Em seguida, chame este método em onscroll, calcule o ponto final e atribua-o aos parâmetros deste método.
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
#div1
{
largura: 200px;
altura: 200px;
plano de fundo: #0000FF;
posição: absoluta;
direita: 0;
inferior: 0;
}
</estilo>
<script type="texto/javascript">
janela.onscroll=função(){
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop;
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //Chame os parâmetros, e os parâmetros dentro são os pontos finais do DIV. Ou seja (altura visual - altura DIV) / 2 + altura móvel
};
var temporizador = null;
função mover(fim) {
clearInterval(timer); //Primeiro, feche o setInterval aberto anteriormente;
temporizador = setInterval(função(){
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //Calcular a velocidade do DIV A velocidade do DIV é igual a (ponto final - altura offsetTop) / fator de escala.
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Para evitar decimais, arredonde para um número inteiro
if (oDiv.offsetTop == end) { //Quando o DIV chegar ao final, feche setInterval;
clearInterval(temporizador);
}
outro {
oDiv.style.top = oDiv.offsetTop + velocidade + 'px'; //Mover o div
}
}, 30);
}
</script>
</head>
<body style="altura: 1000px;">
<divid="div1">
</div>
</body>