Effet:
Idée:
Tout d’abord, chargez onscroll pour contrôler la barre de défilement. Ensuite, écrivez la méthode de mise en mémoire tampon du mouvement. La méthode de mise en mémoire tampon du mouvement consiste d'abord à calculer la vitesse du tampon DIV, à l'arrondir, puis à effectuer un mouvement pour déterminer quand le point final est atteint. Renvoyez enfin ses paramètres. Appelez ensuite cette méthode dans onscroll, calculez le point final et attribuez-le aux paramètres de cette méthode.
Code:
Copiez le code comme suit :
<head runat="serveur">
<titre></titre>
<style type="text/css">
#div1
{
largeur : 200 px ;
hauteur : 200px ;
arrière-plan : #0000FF ;
position : absolue ;
à droite : 0 ;
bas : 0 ;
}
</style>
<script type="text/javascript">
window.onscroll = fonction () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop //Obtenir la hauteur de déplacement;
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //Appelle les paramètres, et les paramètres à l'intérieur sont les points finaux du DIV. Soit (hauteur visuelle - hauteur DIV) / 2 + hauteur mobile
} ;
var minuterie = nul ;
fonction déplacer (fin) {
clearInterval(timer); //Tout d'abord, fermez le setInterval précédemment ouvert;
minuterie = setInterval (fonction () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //Calculer la vitesse de DIV La vitesse de DIV est égale à (point final - hauteur offsetTop) / facteur d'échelle.
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Pour éviter les décimales, arrondissez-le à un nombre entier
if (oDiv.offsetTop == end) { //Lorsque le DIV atteint la fin, fermez setInterval ;
clearInterval (minuterie);
}
autre {
oDiv.style.top = oDiv.offsetTop + speed + 'px' //Déplacer le div
}
}, 30);
}
</script>
</tête>
<body style="hauteur : 1000px;">
<identifiant div="div1">
</div>
</corps>