js实现文字跑马灯效果

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <title>文字滚动</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font: 12px/1 '微软雅黑';
    }

    .wrap {
      border: 1px solid #000;
      font-size: 14px;
      color: #333;
      padding: 5px;
      white-space: nowrap;
      overflow: hidden;
      width: 300px;
    }

    .box {
      width: 1000px;
      overflow: hidden;
    }

    .box p {
      display: inline-block;
    }
  </style>
</head>

<body>
  <!-- 滚动容器 -->
  <div id="wrap" class="wrap">
    <div class="box">
      <p class="txt">高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，高先生的猫，</p>
    </div>
  </div>

  <script>
    let wrap = document.getElementById('wrap');
    let box = wrap.getElementsByTagName('div')[0];
    let p = document.getElementsByTagName('p')[0];
    let p_w = p.offsetWidth;
    let wrap_w = wrap.offsetWidth;
    window.onload = function fun() {
      if (wrap_w > p_w) { return false; }
      box.innerHTML += box.innerHTML;
      setTimeout("fun1()", 50);
    }
    function fun1() {
      if (p_w > wrap.scrollLeft) {
        wrap.scrollLeft++;
        setTimeout("fun1()", 15); // 越小越快
      }
      else {
        setTimeout("fun2()", 50);
      }
    }
    function fun2() {
      wrap.scrollLeft = 0;
      fun1();
    }
  </script>
</body>

</html>
js实现文字跑马灯效果

猜你喜欢
