基于jquery模仿新浪微博的无狭缝滚动2(内容动态加载)

html:

  <div id="runcon">
      <ul class="show">
      </ul>
  </div>

css:

<style type="text/css">
#runcon{
margin:0 auto;
width:400px;
overflow:hidden;
background:#ffffff;
border:1px solid #d6d6d6;
height:100px;
}
#runcon ul{
list-style-type:none;
position:relative;
margin:0px;
padding:0px;
left:0px;
}
#runcon ul li
{
line-height:1.5;
overflow:hidden;
width:100%;
padding:2px 0;
}
</style>

jquery:

第二个脚本是animate()立即暂停，立即滚动脚本；

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.pause.min.js" type="text/javascript"></script>
<script type="text/javascript">
var arr=new Array();
arr[0]="1.css";
arr[1]="2.javascript";
arr[2]="3.jquery";
arr[3]="4.ajax";
arr[4]="5.php";
var str="";
var num=arr.length-4;
var scrolltime;
function getli()
{
    for(j=num;j<arr.length;j++)
    {
    str+="<li>"+arr[j]+"</li>";
    }
$(".show").html(str);
$("#runcon").hover(function(){$(".show li").pause();clearInterval(scrolltime);},function(){ $(".show li").resume();scrolltime=setInterval("show()",2500);}).trigger("mouseleave");

num--;
}
function suan()
    {
         if(num<=0)
          {num=arr.length-1;}
         else
          {num--;}
    }
function show()
{
//alert(arr[num]);
var ul=$(".show");
var liheight=ul.find("li:first").height();
ul.css("top","-"+liheight-2+"px");
$(".show li:first").before('<li style="display:none;">'+arr[num]+'</li>');
$(".show li:first").slideDown(500,function(){$(".show li:first").prev().fadeIn(500);});
$(".show li:last").animate({top:0},500,function(){$(".show li:last").remove();});
//ul.animate({top:0},1500,function(){
//ul.find("li:last").prependTo(ul);
//liheight=ul.find("li:first").height();
//ul.css({top:"-"+liheight-2+"px"});});


suan();
}
$(document).ready(function(){
getli();


});


</script>