html鼠标循环滚动代码大全,jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)...

要求实现：

页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等)，并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。

演示效果图：

1，html页面

代码示例:

2，css代码

代码示例:

ui,li {

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能直接移动元素。