网页中时常能看到文字滚动的效果,尤其是在网页的广告中,下面记两种实现的方法


第一种

使用marquee标签实现

marquee标签是html中的默认标签,但是在html5中已被取消,虽然还有部分浏览器支持这个标签,但是现在这个标签是不被推荐使用的(据说是因为其会造成啥子问题)marquee标签中有direction属性可以设置滚动方向,scrollamount属性设置滚动速度

    <html>
    <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>滚动字幕</title>
    </head>
    <body>
    <script>

      function ColorGetFn(dom){         document.getElementById('colorInput').value = dom.value; 
        document.getElementById("gun").style.color=dom.value;
        
    } 
    function ColorInputFn(dom){ 
        document.getElementById('colorGet').value = dom.value;
        document.getElementById("gun").style.color=dom.value;
    }
    function BgColorGetFn(dom){ 
        document.getElementById('colorInput').value = dom.value; 
        document.getElementById("gun").style.background=dom.value;
        
    } 
    function BgColorInputFn(dom){ 
        document.getElementById('colorGet').value = dom.value;
        document.getElementById("gun").style.background=dom.value;
    }
    function TextInput(dom){
      var txt = dom.value;
      document.getElementById("gun").innerHTML=txt;
    }
    </script>
    <style>
    *{margin:0;}
    marquee{
      background:#000;
      color:#fff;
      font-size:180px;
      width:100%;
      height:350px;
      }
    form{
      margin-top:50px;
      margin-left:20px;
      }
    </style>
    <marquee id="gun" scrollamount="15">这是预览文本</marquee>
    <p align="center">以上是效果预览</p>
    <form>
    <label>请输入文本</label>
    <input placeholder="输入完点击空白处生效" id="in" onchange="TextInput(this)"><br>
    <br>
    <label id="test">文字颜色选择:</label> 
    <input type="color" id="colorGet" onchange="ColorGetFn(this)">&nbsp;&nbsp; <br>
    <br>
    <label>颜色编码:</label>
    <input type="text" id="colorInput" onchange="ColorInputFn(this)" value="#fff"> <br>
     <label>(输入#fff是白色,输入#000是黑色!)</label>
     <br><br>
    <label id="test">背景颜色选择:</label> 
    <input type="color" id="colorGet" onchange="BgColorGetFn(this)">&nbsp;&nbsp; <br>
    <br>
    <label>颜色编码:
    <input type="text" id="colorInput" onchange="BgColorInputFn(this)" value="#fff"> <br>
     (输入#fff是白色,输入#000是黑色!)        </label>
    </form>

    </body>
    </html>

效果图:

1bGgsK.jpg

第二种

使用js实现

使用js使用的主要思路是在一个div标签中添加一个span标签,span标签使用绝对定位的方式确定位置,通过js改变span标签与div标签的左边距来实现文字向左活动

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>滚动字幕</title>
    <style>
        *{
          padding:0;
          margin:0;
          }
        #marquee {
            color: white;
            font-size:300px;
            display: block;
            width: 100%;
            height: 500px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            background:#000;
        }
 
        #marquee_text {
            position: absolute;
            height:100%;
            top:auto;
            left: 100%;
            line-height: auto;
            display: block;
            word-break: keep-all;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
      #in{
        width:100%;
        height:200px;
        font-size:100px;
       }
     #col{
       width:50%;
       height:100px;
     }
     .sp{
     font-size:50px;
     }
    </style>
    </head>

    <body>
    <div id="marquee">
    <span id="marquee_text">这是默认样式哦</span>
    </div>
    <input type="text" placeholder="请输入要滚动的文字" id="in" onchange="TextInput(this)"><br>
    <span class="sp">请选择字体颜色</span>
    <input type="color" id="col" onchange="ColorChange(this)"><br>
    <span class="sp">请选择背景颜色</span>
    <input type="color" id="col" onchange="BgColorChange(this)">
    </body>
    <script type="text/javascript">
    function TextInput(dom){
      var txt = dom.value;
        document.getElementById("marquee_text").innerHTML=txt;
    }
    function ColorChange(dom){
       document.getElementById("marquee_text").style.color = dom.value;
    }
    function BgColorChange(dom){
       document.getElementById("marquee").style.background = dom.value;
    }
    marquee("marquee", "marquee_text");
    function marquee(p, s) {
        var scrollWidth = document.getElementById(p).offsetWidth;
        var textWidth = document.getElementById(s).offsetWidth;
        var i = scrollWidth;
        console.log(scrollWidth, textWidth);
        function change() {
            i=i-5;
         
            if (i < -textWidth) {
                i = scrollWidth;
            }
            document.getElementById(s).style.left = i + "px";
            window.requestAnimationFrame(change);
        }
        window.requestAnimationFrame(change);
    }
  
    </script>
    </html>

效果图:

1bGmKf.jpg