- <!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>
- <style type="text/CSS">
- ul,li{margin:0;padding:0}
- #scrollDiv{width:300px;height:125px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
- #scrollDiv li{height:25px;padding-left:10px;}
- </style>
- <script type="text/javascript" src1="jquery-1.7.1.min.js"></script>
- <script type="text/javascript">
- function AutoScroll(obj){
- $(obj).find("ul:first").animate({
- marginTop:"-25px"
- },500,function(){
- $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
- });
- }
- $(document).ready(function(){
- setInterval('AutoScroll("#scrollDiv")',1000)
- });
- </script>
- </head>
- <body>
- <div id="scrollDiv">
- <ul>
- <li>这是公告标题的第一行</li>
- <li>这是公告标题的第二行</li>
- <li>这是公告标题的第三行</li>
- <li>这是公告标题的第四行</li>
- <li>这是公告标题的第五行</li>
- <li>这是公告标题的第六行</li>
- <li>这是公告标题的第七行</li>
- <li>这是公告标题的第八行</li>
- </ul>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/3007201513282.html
来源: http://www.codesnippet.cn/detail/3007201513282.html