<!DOCTYPE html>
<html>
<head>
<title>Colin Marquee Welcome</title>
<meta name="description" content=" Colin Marquee Welcome" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script>
function autoscroll(obj){
//这里的25px是#scrollDiv的高度
$(obj).find("ul:first").animate({marginTop:"-25px"},1000,function(){
$(this).css("marginTop","0px").find("li:first").appendTo(this)
})/*$(this).css("marginTop","0px")这里也许会有人搞不明白，为什么又设为0。因为在ul向上移25px的时候，其第一个li会添加到ul的末尾，如果ul的marginTop不设为0的话，整个ul就会慢慢移出它的父盒子，最后使得它的父盒子变空，实现不了原本想要实现的效果。*/
}
$(document).ready(function(){
setInterval('autoscroll("#scrollDiv")',3000)
})
</script>
<style>
*{margin:0; padding:0;}
#scrollDiv{width: 500px; height: 25px; line-height: 25px;/*这里的height是25px*/
margin:50px auto; overflow:hidden;}
#scrollDiv li{height:25px; cursor:pointer;}
</style>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第1行</li>
<li>这是公告标题的第2行</li>
<li>这是公告标题的第3行</li>
<li>这是公告标题的第4行</li>
<li>这是公告标题的第5行</li>
<li>这是公告标题的第6行</li>
</ul>
</div>
</body>
</html>
网友评论