jquery向上滚动新闻鼠标悬停效果实现代码

新闻自动向上滚动效果，鼠标悬停在新闻上时，停止滚动，鼠标离开则恢复滚动状态。方法是通过setInterval()和clearInterval()两个函数实现。

HTML代码

<div class="express">
	<ul>
		<li><a href="#" title="滚动新闻标题一">滚动新闻标题一</a></li>
		<li><a href="#" title="滚动新闻标题一">滚动新闻标题二</a></li>
		<li><a href="#" title="滚动新闻标题一">滚动新闻标题三</a></li>
		<li><a href="#" title="滚动新闻标题一">滚动新闻标题四</a></li>
	</ul>
</div>

CSS代码

.express {height:30px; overflow:hidden;}
.express ul {position:relative; overflow:hidden;}
.express li {font-size:16px; height:30px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

jQuery代码

<script>
function express(){
	var height = $('.express').find('li').height();
   $('.express').find('ul').animate({'marginTop':-height},1000,function(){
   		$(this).css('marginTop',0).children('li').eq(0).appendTo($(this));
		//因为第一个li移动到了最后面，那么当前的margin-top就是0
   });
}
$(function(){
	var express = setInterval(express, 3000);
   	$('.express li').hover(function(){
   		clearInterval(express); //鼠标悬停时，使用clearInterval停止执行	
   	},function(){
   		express = setInterval(express, 3000); //鼠标离开时，重新启用setInterval，注意：这里不要加var，这一句是给express重新附值，如果使用var就是定义了新变量express，那么clearInterval(express);就不生效或会出现异常。
   	});
});
</script>