要求实现：
页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。
演示效果图：
1，html页面
2，css代码
3，关键部分---js文件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(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能直接移动元素。