jquery 实现向下滚动效果，类似新浪微博效果

为什么80%的码农都做不了架构师？>>>

效果：http://www.51danyu.com/anyixuan/1.html

jquery：

<script language="javascript">
$(function(){
        var scrtime;
        $("#con").hover(function(){
                clearInterval(scrtime);
        },function(){
        scrtime = setInterval(function(){
                var $ul = $("#con ul");
                var liHeight = $ul.find("li:last").height();
                $ul.animate({marginTop : liHeight+40 +"px"},1000,function(){
                $ul.find("li:last").prependTo($ul)
                $ul.find("li:first").hide();
                $ul.css({marginTop:0});
                $ul.find("li:first").fadeIn(1000);
                });       
        },5000);
        }).trigger("mouseleave");
});
css:

<style type="text/css">
<!--
*{ margin:0; padding:0;}
ul,li{ list-style-type:none;}
body{ font-size:12px;}
#con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #CCCCCC solid; background-color:#f1f1f1; overflow:hidden;}
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}
#con ul li{ width:100%;  border-bottom:1px #CCCCCC dotted; padding:20px 0; }
#con ul li a{ float:left;  border:1px #CCCCCC solid; padding:2px;}
#con ul li a img{ border:0px;}
#con ul li p{ margin-left:68px;line-height:1.5;  padding:10px;}
-->
</style>

html:

<div id="con">
  <ul>
    <li>

      jquery 实现向下滚动效果，类似新浪微博效果

    </li>
  </ul>
</div>

转载于:https://my.oschina.net/u/194233/blog/57927