水平方向滚动字幕的实现

最新推荐文章于 2021-01-21 15:06:09 发布

前端小笨

最新推荐文章于 2021-01-21 15:06:09 发布

阅读量996

点赞数

CC 4.0 BY-SA版权

分类专栏：小需求文章标签： js css

本文链接：https://blog.youkuaiyun.com/lu1036534499/article/details/53707050

小需求专栏收录该内容

1 篇文章

订阅专栏

水平方向滚动字幕的实现

最近做宣传页的时候，碰到一个滚动字幕的实现，现在把代码备份一下：
需求介绍：

页面打开的时候，宣传语一一定的速度循环滚动播放
点击删除按钮，广告语关闭

原理介绍

利用CSS定位中的绝对定位，让广告语left一定的距离，当移动的距离等于一个屏幕宽度的时候，让广告位再回来。

代码

<!DOCTYPE html>
<html>
<head>
    <title>字体滚动</title>
    <script src="./js/jquery.js"></script>
    <style type="text/css">
        .active {
            width: 100vw;
            height: 100vh;
            background-image: url('./image/bmw_m5.jpg');
            background-size: 100% auto;
        }
        .tip-box {
            position: absolute;
            top:0;
            width: 100vw;
            width: 100%;
            height: 49px;
            font-size: 15px;
            background-color: #ff8533;
            color: #fff;
        }
        .overmap1 {
            position: absolute;
            top:0;
            left: 0;
            width: 24px;
            height: 49px;
            background-color: #ff8533;
            z-index: 100;
        }
        .overmap2 {
            position: absolute;
            top:0;
            right: 0;
            width: 72px;
            height: 49px;
            background-color: #ff8533;
            z-index: 100;
        }
        .tips{
            position: relative;
        }
        .tips .tip-content {
            width:100%;
            position: absolute;
            left:0;
            height: 49px;
            line-height: 49px;
            overflow:hidden;
        }
        .tips .tip-del {
            display: block;
            width: 49px;
            height: 49px;
        }
        .tip-del img{
            margin-top: 12px;
            width: 25px;
            height: 25px;
        }
    </style>
</head>
<body>
<div class="active"></div>
<div class="tip-box">
    <div class="tips">
        <div class="overmap1"></div>
        <div id='a' class="tip-content">邀请好友的活动现在开始啦，现在邀请您的好友一起来赚钱，就能享受返现奖励。动动手指，加入我们吧~
        </div>
        <div class="overmap2"> <span class="tip-del"><img src="./image/delete.png"></span></div>
    </div>
</div>
<script type="text/javascript">
    var tipWidth = $(".tips .tip-content").width();
    var i =0;
    function slideOver(){
        i--;
        if(i<=-tipWidth){
            i=1*tipWidth;
            document.getElementById('a').style.right =-tipWidth+'px';
        }else{
            document.getElementById('a').style.left = i+'px';
        }
        setTimeout(slideOver,10);
    }
    window.onload=function(){setTimeout(slideOver,1000)};
    //点击删除按钮，删除广告
    $('.tip-del').bind('click',function(event) {
        $('.tips').css('display','none');
    });
   </script>
</body>
</html>