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

最新推荐文章于 2021-06-07 16:45:59 发布

wflynn

最新推荐文章于 2021-06-07 16:45:59 发布

阅读量386

点赞数

分类专栏： html

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/105147952

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

html

<div id="scroll_div" class="fl" style="margin-top:2rem;line-height:1.8rem">
    <div id="scroll_begin" style="color: red;font-size:1rem;">
        <span style="margin-left:12rem;">
            观看完视频即可免费抽奖
        </span>
        中奖名单：
        恭喜尾号为6657的用户抽中 <span class="pad_right">华为P30手机一部！</span>
        恭喜尾号为8875的用户抽中 <span class="pad_right">IphoneX手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">荣耀X5手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">1000元现金！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">腾讯视频VIP月卡！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">小米8手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">888元现金</span>
    </div>
    <div id="scroll_end"></div>
</div>

css

<style>
        .pad_right {
            padding-right: 2em;
        }

        #scroll_div {
            height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 92%;
            margin-left: 4%
        }

        #scroll_begin, #scroll_end {
            display: inline;
        }
    </style>

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);
        }
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pad_right {
            padding-right: 2em;
        }

        #scroll_div {
            height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 92%;
            margin-left: 4%
        }

        #scroll_begin, #scroll_end {
            display: inline;
        }
    </style>
</head>
<body>
<div id="scroll_div" class="fl" style="margin-top:2rem;line-height:1.8rem">
    <div id="scroll_begin" style="color: red;font-size:1rem;">
        <span style="margin-left:12rem;">
            观看完视频即可免费抽奖
        </span>
        中奖名单：
        恭喜尾号为6657的用户抽中 <span class="pad_right">华为P30手机一部！</span>
        恭喜尾号为8875的用户抽中 <span class="pad_right">IphoneX手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">荣耀X5手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">1000元现金！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">腾讯视频VIP月卡！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">小米8手机一部！</span>
        恭喜尾号为3236的用户抽中 <span class="pad_right">888元现金</span>
    </div>
    <div id="scroll_end"></div>
</div>
<script>
    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);
        }
    }
</script>
</body>
</html>

wflynn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生HTML实现文字横向滚动以及触摸暂停

html<div id="scroll_div" class="fl" style="margin-top:2rem;line-height:1.8rem"> <div id="scroll_begin" style="color: red;font-size:1rem;"> <span style="margin-left:12rem;...
复制链接

扫一扫