当前位置: 编程技术>jquery
jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
来源: 互联网 发布时间：2014-09-03
本文导语: 要求实现： 页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。 演示效果图： 1，html页面 代码示例: aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc dd...
要求实现：
页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。
演示效果图：
1，html页面
代码示例:
2，css代码
代码示例:
ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}
3，关键部分---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能直接移动元素。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。