简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  jQuery implements automatic scrolling of lists to display news in a loop_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:38:541918browse

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:

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.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery asynchronously loads data and adds events example_jqueryNext article：jQuery asynchronously loads data and adds events example_jquery

Related articles

See more