原生HTML实现文字横向滚动以及触摸暂停-白红宇

原生HTML实现文字横向滚动以及触摸暂停

阅读量：260 次

发布时间：2019-03-01

本文共 1511 字，大约阅读时间需要 5 分钟。

html


       
            
                 观看完视频即可免费抽奖                中奖名单：        恭喜尾号为6657的用户抽中 
     华为P30手机一部！        恭喜尾号为8875的用户抽中 
     IphoneX手机一部！        恭喜尾号为3236的用户抽中 
     荣耀X5手机一部！        恭喜尾号为3236的用户抽中 
     1000元现金！        恭喜尾号为3236的用户抽中 
     腾讯视频VIP月卡！        恭喜尾号为3236的用户抽中 
     小米8手机一部！        恭喜尾号为3236的用户抽中 
     888元现金

css

ScrollImgLeft()    function ScrollImgLeft(speed = 1){        var speed = speed;        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);        }    }

完整代码

    
       Title    
       
            
                 观看完视频即可免费抽奖                中奖名单：        恭喜尾号为6657的用户抽中 
     华为P30手机一部！        恭喜尾号为8875的用户抽中 
     IphoneX手机一部！        恭喜尾号为3236的用户抽中 
     荣耀X5手机一部！        恭喜尾号为3236的用户抽中 
     1000元现金！        恭喜尾号为3236的用户抽中 
     腾讯视频VIP月卡！        恭喜尾号为3236的用户抽中 
     小米8手机一部！        恭喜尾号为3236的用户抽中 
     888元现金