zoukankan      html  css  js  c++  java
  • js实现文字横向滚动

    页面布局

         <div id="scroll_div" class="fl"> 
            <div id="scroll_begin">
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            </div>
            <div id="scroll_end"></div>
        </div>

    样式:
    .pad_right{ padding-right:2em;}
    #scroll_div {height:26px;overflow: hidden;white-space: nowrap;535px;margin-left:10px;}
    #scroll_begin,#scroll_end {display: inline;}

    js代码:

    //文字横向滚动
    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();
  • 相关阅读:
    CentOS7修改计算机名!
    kafka原理和实践
    sip协议详解
    MP4视频测试URL地址,亲测有效
    pkill精确匹配进程名称
    gdb break 断点设置
    ZR#996
    CF1217C
    CF1217B
    CF1217A
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/4462594.html
Copyright © 2011-2022 走看看