字体横向滚动效果 

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>文字横向滚动</title>
    <style>
        .pad_right{ padding-right:2em;}
        #scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:1260px;margin-left:10px;}
        #scroll_begin,#scroll_end {display: inline;}
    </style>
    <body>
        <div id="scroll_div" class="fl"> 
          <div id="scroll_begin">
                   恭喜123765***获得 <span class="pad_right">10元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">20元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">60元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">70元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">80元巨人点卡奖励</span>
                   恭喜123765***获得 <span class="pad_right">100元巨人点卡奖励</span>
              </div> 
              <div id="scroll_end"></div>
         </div> 
         <script>
             //文字横向滚动
        function ScrollImgLeft(){ 
             var speed=50;
             var MyMar = null;
             var scroll_begin = document.getElementById("scroll_begin"); 
             var scroll_end = document.getElementById("scroll_end"); 
             var scroll_div = document.getElementById("scroll_div"); 
             scroll_end.innerHTML=scroll_begin.innerHTML; 
             function Marquee(){ 
                  if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
                       scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
                  else
                       scroll_div.scrollLeft++; 
              } 
              MyMar=setInterval(Marquee,speed); 
              scroll_div.onmouseover = function(){
    　　　　　　　    clearInterval(MyMar);
　　　　　          }
              scroll_div.onmouseout = function(){
    　　　　　　　    MyMar = setInterval(Marquee,speed);　　　　
    　　　　    }  
        }
        ScrollImgLeft();
         </script>
    </body>
</html>

 

posted @ 2017-12-12 14:38  rachelch  阅读(274)  评论(0)    收藏  举报