[jQuery] 最简单的字幕自动向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="data/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/css">
#scrollDiv {
height: 280px;
overflow: hidden;
}
#scrollDiv ul li {
border-bottom: 1px dotted #BBBBBB;
margin-bottom: 10px;
}
</script>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first")
.animate({
marginTop: "-46px"
},
500,
function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
}
);
}
$(document).ready(function() {
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
</head>
<div id="scrollDiv">
<ul>
<li>
测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1
</li>
<li>
测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2
</li>
<li>
测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3
</li>
<li>
测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4
</li>
<li>
测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5
</li>
<li>
测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6
</li>
</ul>
</div>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="data/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/css">
#scrollDiv {
height: 280px;
overflow: hidden;
}
#scrollDiv ul li {
border-bottom: 1px dotted #BBBBBB;
margin-bottom: 10px;
}
</script>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first")
.animate({
marginTop: "-46px"
},
500,
function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
}
);
}
$(document).ready(function() {
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
</head>
<div id="scrollDiv">
<ul>
<li>
测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1，测试1
</li>
<li>
测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2，测试2
</li>
<li>
测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3，测试3
</li>
<li>
测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4，测试4
</li>
<li>
测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5，测试5
</li>
<li>
测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6，测试6
</li>
</ul>
</div>
<body>
</body>
</html>
