demo1：
<!DOCTYPE html>
<html>
<head>
<title>div內容間隔1秒動態滾動</title>
</head>
<body>
<div id="demo">
<span id="sp">
<p>恭喜133****1231用戶獲得100元手機話費</p>
<p>恭喜134****1232用戶獲得100元手機話費</p>
<p>恭喜135****1233用戶獲得200元手機話費</p>
<p>恭喜136****1234用戶獲得100元手機話費</p>
<p>恭喜137****1235用戶獲得200元手機話費</p>
<p>恭喜138****1236用戶獲得100元手機話費</p>
</span>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval('autoScroll("#demo")', 1000);
});
function autoScroll(obj) {
$(obj).find("#sp:first").animate({
marginTop: "-30px"
}, 500, function() {
$(this).css({marginTop:"0px"}).find("p:first").appendTo(this);
});
}
</script>
</body>
</html>
demo2：
<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;list-style:none;}
</style>
</head>
<body>
<a href="#">第一條新聞</a>
<a href="#">第二條新聞</a>
<a href="#">第三條動態</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function() {
$('a:first').siblings().hide();
setInterval(function() {
$('a:visible').slideUp('slow', function() {
$(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");
});
}, 1000*2)
});
</script>
</body>
</html>
demo3：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="drawLetters" style="overflow:hidden;height:200px;">
<div id="dl">
<p>恭喜133****1062用戶獲得10元手機話費</p>
<p>恭喜153****0792用戶獲得50元助學代金券</p>
<p>恭喜153****3890用戶獲得330元上課大禮包</p>
<p>恭喜189****0883用戶獲得330元上課大禮包</p>
<p>恭喜133****6823用戶獲得1500元現金</p>
<p>恭喜153****5050用戶獲得330元上課大禮包</p>
</div>
</div>
<script language="javascript" type="text/javascript">
var drawLetters = document.getElementById("drawLetters");
var dl = document.getElementById("dl");
var speed = 20; //滾動速度值，值越大速度越慢
function Marquee() {
drawLetters.scrollTop++;
var newNode = document.createElement("div");
newNode.innerHTML = dl.innerHTML;
drawLetters.insertBefore(newNode,null);
}
var MyMar = setInterval(Marquee, speed); //設置定時器
</script>
</body>
</html>