Dieser Artikel beschreibt die Methode von JS, um ein ununterbrochenes Scrollen von Einzellinientext zu erreichen. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Vor ein paar Tagen habe ich eine einzige Textlinie geschrieben, um kontinuierlich auf einen Freund nach oben zu scrollen. Jetzt teile ich es mit den Webers, die ich brauche. Schauen wir uns zuerst den HTML- und CSS -Code an:
CSS:
Kopieren Sie den Code wie folgt: .wrap {padding: 10px; border: 1px #ccc solide; Breite: 500px; Rand: 20px Auto;}
.Roll-wrap {Höhe: 130px; Überlauf: versteckt;}
HTML:
Kopieren Sie den Code wie folgt: <Div>
<div id = "rollwrap">
<ul>
<li> JS Text Scrollen 1 </li>
<li> JS Text Scrollen 2 </li>
<li> JS Text Scrollen 3 </li>
<li> JS Text Scrollen 4 </li>
<li> JS Text Scrollen 5 </li>
<li> JS Text Scrollen 6 </li>
<li> JS Text Scrollen nach oben 7 </li>
</ul>
</div>
</div>
Das Prinzip dieses Animationseffekts besteht darin, zuerst die Höhe der Höhe eines Li nach oben zu scrollen, und nach dem Scrollen wird das erste Li in UL am Ende von UL platziert. Zu diesem Zeitpunkt wird das ursprüngliche zweite Li zum ersten Li in UL und wiederholt die obigen Aktionen und wiederholt das kontinuierliche Scrollen.
JS (JQuery) Code:
Kopieren Sie den Code wie folgt: Funktion scrolltxt () {
var controlls = {},
values = {},,
t1 = 200, /*Zeit zum Spielen der Animation* /
T2 = 2000, /*Spielzeitintervall* /
Si;
Controls.rollwrap = $ ("#Roll-Wrap");
Controls.rollwrapul = Controls.rollwrap.Children ();
Controls.rollwraplis = Controls.rollwrapul.children ();
values.Linums = Controls.rollwraplis.Length;
values.liHeight = Controls.rollwraplis.eq (0) .Height ();
values.ulHeight = Controls.rollwrap.height ();
this.init = function () {
autoplay ();
penseplay ();
}
/*scrollen*/
Funktion Play () {
Controls.rollwrapul.animate ({"Margin-top": "-"+values.liHeight}, T1, function () {
$ (this) .css ("Margin-Top", "0"). Kinder (). EQ (0) .Andto ($ (this));
});
}
/*Auto scrollen*/
Funktion autoplay () {
/ *Scrollen Sie, wenn die Höhe und Höhe aller Li-Tags größer sind als die Höhe von .roll-wrap */
if (values.liHeight*values.linums> values.ulHeight) {
si = setInterval (function () {
spielen();
}, t2);
}
}
/*Scrollen pausiert, wenn die Maus mit ul*/vorbeikommt*/
Funktion pUSeplay () {
Controls.rollwrapul.on ({{{
"Mouseenter": function () {
ClearInterval (SI);
},
"MousEleave": function () {
autoplay ();
}
});
}
}
New ScrollTxt (). init ();
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.