jQuery implements automatic circular scrolling of lists and stops scrolling when the mouse is hovering_jquery

It is necessary to scroll and display news (announcements, events, pictures, etc.) in a small area on the page, and stop scrolling and prompt when the mouse hovers, and continue scrolling after leaving.

Rendering:

Upload the useful information
html:

Copy code The code is as follows:

• aaaaaaaaaaaaaaa


• bbbbbbbbbbbbbbb


• cccccccccccccccc




• eeeeeeeeeeeeeee


• ffffffffffffffff


• 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 the understanding and application of hover, setInterval, clearInterval, animate methods and marginTop attributes (marginLeft, top, left, etc.). It should be noted that if .trigger("mouseleave") is not added, on the web page The list will not scroll during initialization, and appendTo can directly move elements, that's all.