首页 > 代码库 > 文本上下滚动

文本上下滚动

<div id="roll" style="overflow: hidden;height:120px;"> 
    <div id="roll-content"> 
     <div class="container" style="margin-bottom:20px;">
      <div class="subhead">
       贯彻新要求 落实新举措
      </div>
      <div class="mainhead">
       各省税务机关以作风建设新常态推动税收事业新发展
      </div>
      <div class="content-version">
       来源:总局教育实践活动领导小组办公室
      </div>
     </div> 
     <div class="container" style="margin-bottom:20px;">
      <div class="subhead">
       [CCTV]税收优惠政策 帮扶就在身边
      </div>
      <div class="mainhead">
       点滴税收  构建美好家园
      </div>
      <div class="content-version">
       来源:总局教育实践活动
      </div>
     </div> 
     
    </div> 
    <div id="roll-clone"></div>
   </div>

$(function(){
  
  var speed=30; //
   tab=$("#roll"),
   tab1=$("#roll-content"),
   tab2=$("#roll-clone");
    
  tab2[0].innerHTML=tab1[0].innerHTML; //
  
  function Marquee(){ 
   if(tab2[0].offsetTop-tab[0].scrollTop<=0){
    tab[0].scrollTop-=tab1[0].offsetHeight; //demo
   }else{ 
    tab[0].scrollTop++;
   }
  } 
  var MyMar=setInterval(Marquee,speed); 
  //鼠标移到该区域时停止滚动
  tab[0].onmouseover=function() {
   clearInterval(MyMar);
  };
  //开始滚动
  tab[0].onmouseout=function() {
   MyMar=setInterval(Marquee,speed);
  };//
    
 });

 

文本上下滚动