前段时间，一朋友问我，有没有类似于新闻自动滚动的JS代码，我想了想，没有，就随手帮朋友写了个jQuery的扩展给他用。
先上Html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="scripts/jQuery.updownSlide.js"></script>
<style type="text/css">
ul{width:20%;height:100px;overflow:hidden;}
li{line-height:20px;}
</style>
</head>
<body>
<div id="marquee">
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
<li>7777777777</li>
<li>8888888888</li>
<li>9999999999</li>
<li>0000000000</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#marquee").updownSlide({line:1, speed:500, timerInterval: 2000});
})
</script>
</body>
</html>
在上jQuery.updownSlide.js代码：
/*
* 向上无缝滚动JS
*
* Created By qingye_love@qq.com
* Time: 2013.3.25
*/
(function($){
$.fn.updownSlide = function(settings){
settings = jQuery.extend({
speed: "normal",
line: 1,
timerInterval: 2000
}, settings);
return this.each(function(){
$.fn.updownSlide.scroll($(this), settings);
});
}
$.fn.updownSlide.scroll = function($this, settings){
var ul = $("ul:eq(0)", $this);
ul.hover(
function(){
clearInterval(timerHandler);
},
function(){
timerHandler = setInterval(function(){
var li = ul.find("li:first");
var height = li.height();
li.stop(true).animate({marginTop: -height+'px'}, settings.speed, function(){
li.css("marginTop", 0).remove().appendTo(ul);
});
}, settings.timerInterval);
}
).trigger("mouseleave");
}
})(jQuery);
由于是临时写的，所以，只支持一行自动向上滚动，有时间的话，会好好整理整理，实现多行，4方向自动滚动。