Cet article décrit la méthode de JS pour réaliser un défilement ininterrompu du texte unique. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il y a quelques jours, j'ai écrit une seule ligne de texte pour faire défiler vers le haut en continu pour un ami. Maintenant, je le partage avec les Webers dont j'ai besoin. Regardons d'abord le code HTML et CSS:
CSS:
Copiez le code comme suit: .Wrap {padding: 10px; bordure: 1px #ccc solide; Largeur: 500px; marge: 20px auto;}
.Roll-wrap {hauteur: 130px; débordement: caché;}
HTML:
Copiez le code comme suit: <div>
<div id = "roll-wap">
<ul>
<li> JS Text défile 1 </li>
<li> JS Text défile 2 </li>
<li> JS Text défilement vers le haut 3 </li>
<li> JS Text défile 4 </li>
<li> JS Text défilement vers le haut 5 </li>
<li> JS Text défile 6 </li>
<li> JS Text défilement vers le haut 7 </li>
</ul>
</div>
</div>
Le principe de cet effet d'animation est de faire défiler d'abord l'ul vers le haut de la hauteur d'un Li, et après le défilement, le premier Li en UL est placé à la fin de UL. À l'heure actuelle, le deuxième LI d'origine devient le premier LI dans UL, puis répétez les actions ci-dessus et répétez le défilement continu.
Code JS (jQuery):
Copiez le code comme suit: fonction scrolltxt () {
var contrôles = {},
valeurs = {},
t1 = 200, / * temps pour jouer l'animation * /
t2 = 2000, / * jouer l'intervalle de temps * /
si;
Controls.RollWrap = $ ("# roll-wap");
Controls.RollWrapul = Controls.RollWrap.children ();
Controls.RollWraplis = Controls.RollWrapul.children ();
valeurs.linumms = contrôle.rollwraplis.length;
valeurs.liHeight = Controls.rollWraplis.eq (0) .Height ();
valeurs.ulHeight = Controls.rollWrap.Height ();
this.init = function () {
AutoPlay ();
pauseplay ();
}
/*rouleau*/
fonction play () {
Controls.rollWrapul.animate ({"margin-top": "-" + valeurs.liheight}, t1, function () {
$ (this) .css ("margin-top", "0"). enfants (). eq (0) .appendto ($ (this));
});
}
/ * Scroll automatique * /
fonction autoplay () {
/ * Faites défiler si la hauteur et la hauteur de toutes les étiquettes Li sont supérieures à la hauteur de .roll-wrap * /
if (valeurs.liheight * valeurs.linumms> valeurs.ulHeight) {
si = setInterval (function () {
jouer();
}, t2);
}
}
/ * Défilement des pauses lorsque la souris passe par ul * /
fonction pauseplay () {
contrôle.rollwrapul.on ({
"MouseEnter": function () {
ClearInterval (SI);
},
"Mouseleave": fonction () {
AutoPlay ();
}
});
}
}
Nouveau scrolltxt (). init ();
J'espère que cet article sera utile à la programmation JavaScript de tous.