插入数据定时向左滚动
来源:互联网 发布: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>