js文字列表滚动鼠标悬浮停止

js代码

//js代码
(function($){
	$.fn.myScroll = function(options){
	//默认配置
	var defaults = {
		speed:40,  //滚动速度,值越大速度越慢
		rowHeight:24 //每行的高度
	};
	var opts = $.extend({}, defaults, options),intId = [];
	function marquee(obj, step){
		obj.find("ul").animate({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		this.each(function(i){
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this, sh);
				}
			}, speed);
			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, sh);
					}
				}, speed);
			});
		});
	}
})(jQuery);
$(function(){
	$(".gundong").myScroll({
		speed:20,
		rowHeight:24
	});
});

html代码

<div class="demo">
	<h2>超过列表长度，自动滚动</h2>
	<div class="gundong">
		<ul>
			<li>
				<em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p>
			</li>
			<li>
				<em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p>
			</li>
			<li>
				<em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p>
			</li>
			<li>
				<em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p>
			</li>
			<li>
				<em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p>
			</li>
			<li>
				<em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p>
			</li>
			<li>
				<em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p>
			</li>
			<li>
				<em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p>
			</li>
			<li>
				<em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p>
			</li>
			<li>
				<em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p>
			</li>
			<li>
				<em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p>
			</li>
			<li>
				<em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p>
			</li>
		</ul>
	</div>
	
	<h2>超过列表长度，不自动滚动</h2>
	<div class="gundong">
		<ul>
			<li>
				<em>02</em><p><a href="http://www.jsdaima.com/" target="_blank">窗前明月光</a></p>
			</li>
			<li>
				<em>03</em><p><a href="http://www.jsdaima.com/" target="_blank">疑是地上霜</a></p>
			</li>
			<li>
				<em>04</em><p><a href="http://www.jsdaima.com/" target="_blank">举头望明月</a></p>
			</li>
			<li>
				<em>05</em><p><a href="http://www.jsdaima.com/" target="_blank">低头思故乡</a></p>
			</li>
		</ul>
	</div>
</div>