jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
发布时间：2015-11-10 编辑：jiaochengji.com
本文介绍下，jquery实现页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。有需要的朋友参考下吧。
要求实现：
页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。
演示效果图：
1，html页面
复制代码 代码示例:
<div id="news">
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>
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能直接移动元素。
您可能感兴趣的文章：
jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
JS图片滚动的实例代码 js实现图片的无缝、平滑滚动
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
基于jQuery的可以控制左右滚动及自动滚动效果的代码
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
js图片无缝平滑滚动实例
jQuery新闻滚动插件 jquery.roller.js
jQuery使用数组编写图片无缝向左滚动
Javascript 连续滚动字幕的实现代码示例
[关闭]