- <!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" c />
- <title>无标题文档</title>
- <style type="text/css">
- ul,li{margin:0;padding:0}
- #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
- #scrollDiv li{height:25px;padding-left:10px;}
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- function AutoScroll(obj){
- $(obj).find("ul").animate({
- marginTop:"-25px"
- },1000,function(){
- $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
- });
- }
- $(document).ready(function(){
- setInterval('AutoScroll("#scrollDiv")',3000)
- });
- </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>
转载于:https://blog.51cto.com/liushan/368406