jQuery implementiert das automatische Scrollen von Listen, um Nachrichten in einer loop_jquery anzuzeigen

Nachrichten (Ankündigungen, Veranstaltungen, Bilder usw.) müssen kreisförmig scrollend in einem kleinen Bereich auf der Seite angezeigt werden, und das Scrollen sollte anhalten und eine Aufforderung anzeigen, wenn die Maus darüber schwebt, und das Scrollen sollte danach fortgesetzt werden verlassen.

Rendering:

Hier ist das trockene Zeug

html:

Code kopieren Der Code lautet wie folgt:

• aaaaaaaaaaaaaaa


• bbbbbbbbbbbbbbbb


• cccccccccccccccc


• ddddddddddddddd


• eeeeeeeeeeeee


• fffffffffffffff


• ggggggggggggggg

CSS:

Code kopieren Der Code lautet wie folgt:

ui,li {
Listenstil: keiner;
}
#Neuigkeiten{
Höhe: 75px;
Überlauf: versteckt;
}

Der Schlüssel ist die js-Datei:

Code kopieren Der Code lautet wie folgt:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

Funktion scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
„marginTop“: -lineHeight „px“
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

Die Hauptsache ist, die Methoden „hover“, „setInterval“, „clearInterval“ und „animate“ sowie das Attribut „marginTop“ (marginLeft, top, left usw.) zu verstehen und zu verwenden. Es ist zu beachten, dass, wenn Sie .trigger(„mouseleave“) nicht hinzufügen, Wenn die Webseite initialisiert wird, wird die Liste nicht gescrollt, und appendTo kann Elemente direkt verschieben, das ist alles.