【js与jquery】jquery循环滚动新闻

1.效果如图：

2.html代码：

<h3>最新动态</h3>
<div class="scrollNews" >
         <ul>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
	<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
	</ul>
</div>
           

3.jquery代码：

/*新闻滚动*/
$(function(){
        //将$(".scrollNews")对象作为参数传递给scollNews()函数的参数
        var $this = $(".scrollNews");
		//滚动定时器变量
		var scrollTimer;
		//hover()方法的含义是鼠标滑入滑出，它对应着两个事件，即mouseenter和mouseleave，因此可通过trigger("mouseleave")来触发hover事件的第二个函数
		$this.hover(
			function(){
						clearInterval(scrollTimer);
			},
			function(){
						 scrollTimer = setInterval(function(){
								scrollNews( $this );//每3秒执行一次scrollNews函数
						 }, 3000 );
			}
		).trigger("mouseleave");//当用户进入页面后就会触发hover事件的第二个函数，从而使内容滚动起来

});
function scrollNews(obj){
   var $self = obj.find("ul:first"); //找到第一个ul元素
   var lineHeight = $self.find("li:first").height(); //获取第一个li元素的行高
   $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
		 //alert($self.css({marginTop:0}).find("li:first").text());//逐条获取
		 //把所有匹配的元素追加到$self元素的后面,所以才出现这种周而复始滚动的效果
         $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
   })
}
           

分析：通过控制$(".scrollNews");对象内的<ul>元素的marginTop属性来得到动画效果。至于每次滚动的高度，可以通过获取<ul>元素内的第一个<li>元素的高度来达到目的。当每次滚动完毕后，需要把当前第一个<li>元素移动到<ul>元素内的最后，然后将<ul>元素的marginTop属性设置为零，这样动画才可以无限的循环滚动