Jquery（第一篇 消息公告列表循环垂直向上滚动）

1、html代码如下（也就是循环滚动的列表）：

 <div class="b-scrollBox">
             <ul id="scrollList">
                <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>
                 <li id="li1">
                   <span class="unitname">  南车株洲电力机车研究所有限公司风电事业部
                   </span>
                   <span class="b-contact">
                    袁海鹏
                   </span>
                   <span class="b-enterprise">22837780</span>
                    <span class="b-cadres">
                    袁海鹏
                   </span>
                   <span class="b-department">管委办（区政府办）</span>
                   <span class="b-contactphone">13973389433</span>
                   <span class="b-education">教育</span>
                </li>             
            
             </ul>
        </div> 

2、

<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script>
  $(document).ready(function() {
     function movedome(){
        var margintop=0;//上边距的偏移量
        var stop=false;
        setInterval(function(){
           if(stop==true){
               return;
           }
           $("#scrollList").children("li").first().animate({"margin-top":margintop--},0,function(){
              var $li=$(this);
              if(!$li.is(":animated")){//第一个li的动画结束时
                if(-margintop>$li.height()){
                   $li.css("margin-top","0px").appendTo($("#scrollList"));
                   margintop=0;
                }
              }
           });
        },180);
     //鼠标放到(ul)上时
    $("#scrollList").hover(function(){
       $(this).css("cursor","pointer");
          stop=true;//停止动画
       },function(){
           stop=false;//开始动画
       });
   }
   movedome();
});
</script>

3、效果如下图：