<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
*
{ margin:0px; padding:0px;
}
#demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
#demo ul.line,#demo ul.mulitline{width:500px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
#demo ul.mulitline{height:300px}
#demo li{text-indent:15px; font-size:12px; line-height:30px;list-style:none; display:block}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="demo">
<h2>单行应用</h2>
<ul class="line">
<li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关<br />闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
<li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
<li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
<li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
<li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
</ul>
<!--//多行应用//-->
<ul class="mulitline">
<li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
<li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
<li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
<li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
<li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
</ul>
</div>
<input type="button" value="adsf" onclick="add()" />
</form>
<script type="text/javascript">
$(function () {
//单行应用 向下滚动
var wrap = $('ul.line'); //定义滚动区域
var interval = 3000; //定义滚动间隙时间
var moving; //需要清除的动画
wrap.hover(function () {
clearInterval(moving); //当鼠标在滚动区域中时,停止滚动
}, function () {
moving = setInterval(function () {
var field = wrap.find('li:last');
var h = field.height();
wrap.prepend(field.css('marginTop', -h + 'px'));//将最后一个移到顶部，且不可见
field.animate({ 'marginTop': 0 }, 600)//显示出来
}, interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');
});
$(function () {
//多行应用 向下
var _wrap = $('ul.mulitline'); //定义滚动区域
var _interval = 3000; //定义滚动间隙时间
var _moving; //需要清除的动画
_wrap.hover(function () {
clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动
}, function () {
_moving = setInterval(function () {
var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
var _h = _field.height(); //取得每次滚动高度
_field.animate({ marginTop: -_h + 'px' }, 600, function () {//通过取负margin值,隐藏第一行
_field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
}, _interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动
});
function add() {
var wrap = $("ul.line");
var field = wrap.find("li:last");
var h = field.height();
field.css('marginTop', -h + 'px');
wrap.prepend(field);
field.animate({ marginTop: 0 }, 600);
}
</script>
</body>
</html>
原文发布于Mr.Think的个人博客: http://mrthink.net/js-jq-autoscroll-updown/
自己加了一个单行向下的