jQuery implements automatic scrolling of lists to display news in a loop_jquery

News (announcements, events, pictures, etc.) need to be displayed in a circular scrolling manner in a small area on the page, and the scrolling should stop and prompt when the mouse is hovering, and the scrolling should continue after leaving.

Rendering:

Here’s the dry stuff

html:

Copy code The code is as follows:

• aaaaaaaaaaaaaaa


• bbbbbbbbbbbbbbb


• cccccccccccccccc


• ddddddddddddddd


• eeeeeeeeeeeee


• fffffffffffffff


• ggggggggggggggg

css:

Copy code The code is as follows:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

The key is the js file:

Copy code The code is as follows:

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

function 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);
})
}
})

The main thing is to understand and use the hover, setInterval, clearInterval, animate methods and the marginTop attribute (marginLeft, top, left, etc.). It should be noted that if you do not add .trigger("mouseleave"), when the web page is initialized The list will not scroll, and appendTo can move elements directly, that's all.