插入数据定时向左滚动

来源:互联网 发布:java语言的特点 编辑:程序博客网 时间:2024/06/01 21:13
<style type="text/css">.list,li{list-style:none; margin:0; padding:0;}          .scroll{ width:500px; height:25px; overflow:hidden; border:1px solid #333;}          .scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden; float:left;}          .scroll li a{ font-size:14px;color:#333; text-decoration:none;}          .scroll li a:hover{ text-decoration:underline;}</style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>                         <div class="scroll">              <ul class="list">                  <li id="1"><a href="#" target="_blank">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</a></li>                  <li id="2"><a href="#" target="_blank">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb2</a></li> <li><a href="#" target="_blank">4444444444444444444</a></li> <li><a href="#" target="_blank">5555555555555555555</a></li>  <li><a href="#" target="_blank">66666666666666666666</a></li><li><a href="#" target="_blank">777777777777777777777777</a></li>              </ul>          </div><script>var html="<li>3333333333333</li>"                function autoScroll(obj){var w = $(obj + " .list li").size() * 500;$(obj + " .list").css({width:w,overflow:"hidden",zoom:"1"});                    $(obj).find(".list").animate({marginLeft:"-500px"},1000,function(){$(this).css({marginLeft:"0px"}).find("li:first").appendTo(this);$(this).find("li:first").after(html);html="";                    })                  } $(".list").html();$("#2").remove();var i=0;                $(function(){                      setInterval('autoScroll(".scroll")',10000);setInterval(function(){html="<li id='"+Math.random()*10+"'>"+(i++)+"</li>";},10000);                }) </script>

原创粉丝点击