jQuery实现列表自动滚动循环滚动展示新闻_jquery
程序员文章站
2022-04-16 11:21:44
...
需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。
css：
ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}
关键是js文件：
$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");
主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性（marginLeft、top、left等等）的理解和运用，需要注意的是，如果不加.trigger("mouseleave")，在网页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。
效果图：
上干货
html：
复制代码 代码如下:
- aaaaaaaaaaaaaaa
- bbbbbbbbbbbbbbb
- ccccccccccccccc
- ddddddddddddddd
- eeeeeeeeeeeeeee
- fffffffffffffff
- ggggggggggggggg
css：
复制代码 代码如下:
ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}
关键是js文件：
复制代码 代码如下:
$(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);
})
}
})
主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性（marginLeft、top、left等等）的理解和运用，需要注意的是，如果不加.trigger("mouseleave")，在网页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。