html滚动效果

标签：html滚动效果

    <div class="table table1">
     <div class="table-title b-mar-b-5">
      <table cellpadding="0" cellspacing="0">
       <tr>
        <td width="90">受理机构</td>
        <td width="135">服务事项</td>
        <td width="120">业务流水号</td>
        <td width="130">办结时间</td>       
       </tr>
      </table>
     </div>
     <div class="table-cnt b-mar-b-5" id="tci">
      <div class="table-cnt-item" id="tci1">
       <table cellpadding="0" cellspacing="0" id="onlineBusiness">
       </table>      
      </div>
      <div class="table-cnt-item" id="tci2"></div>
     </div>
    </div>
    <script type="text/javascript">
    $.post("/getOnlineBusinessJSONList.action",{regionalismCode:‘441602‘,sortCode:2,pageSize:10},function(data){
     if(data.success){
      var table = $("#onlineBusiness");
      $.each(data.obj,function(i,obj){
       var tr=$("<tr></tr>");
       tr.appendTo(table);
       var td1=$("<td><div class=‘table-td-1‘>"+obj.recievingDepartment+"</div></td>");
       td1.appendTo(tr);
       var td2=$("<td><div class=‘table-td-2‘>"+obj.serviceItems+"</div></td>");
       td2.appendTo(tr);
       var td3=$("<td><div class=‘table-td-3‘>"+obj.id+"</td>");
       td3.appendTo(tr);
       var td4=$("<td><div class=‘table-td-4‘>"+obj.completionTime+"</div></td>");
       td4.appendTo(tr);
      });
     }
     if($("#onlineBusiness tr").length>3){
      var rollspeed=30;
      tci2.innerHTML=tci1.innerHTML; 
      function Marquee1(){
       if(tci2.offsetHeight-tci.scrollTop <=0) 
        tci.scrollTop-=tci1.offsetHeight; 
       else{
        tci.scrollTop++ ;
       }
      }
      var MyMar1=setInterval(Marquee1,rollspeed) ;
      tci. {clearInterval(MyMar1);}// 鼠标放上去停止滚动
      tci. {MyMar1=setInterval(Marquee1,rollspeed);}// 鼠标挪开继续滚动
    
     } 
    },‘json‘);
    </script>    

html滚动效果

标签：html滚动效果

原文地址：http://7883830.blog.51cto.com/7873830/1690395