当前位置：网站首页>JS to achieve the effect of text marquee

JS to achieve the effect of text marquee

2022-06-26 03:42:00 【Mr. Gao's cat】 

<!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> Text scrolling </title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font: 12px/1 ' Microsoft YaHei ';
    }

    .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>
  <!--  Rolling containers  -->
  <div id="wrap" class="wrap">
    <div class="box">
      <p class="txt"> Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat , Mr. Gao's cat ,</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); //  The smaller, the faster 
      }
      else {
        setTimeout("fun2()", 50);
      }
    }
    function fun2() {
      wrap.scrollLeft = 0;
      fun1();
    }
  </script>
</body>

</html>

 

原网站

版权声明
本文为[Mr. Gao's cat]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260314397751.html

边栏推荐

猜你喜欢

随机推荐