CSS3+js实现循环滚动文字播放与暂停demo

时间:2021-09-27
本文章向大家介绍CSS3+js实现循环滚动文字播放与暂停demo,主要包括CSS3+js实现循环滚动文字播放与暂停demo使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一开始这个功能的实现,我使用了marquee,后来发现marquee已被废弃,没办法还是使用css+js来实现

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS3+js实现循环滚动文字播放与暂停</title>
  <style>
    .box {
      background-color: #f0f9eb;
      position: relative;
      border: 1px solid #ebccd1;
      height: 40px;
      line-height: 40px;
      overflow: hidden;
    }

    .toptext,
    .static {
      color: #67c23a;
      white-space: nowrap;
      position: absolute;
      animation: txt 10s linear infinite;
      animation-play-state: running;
      margin: 0;
      cursor: pointer;
    }

    .static {
      animation-play-state: paused;
    }

    @keyframes txt {
      0% {
        left: 0;
      }

      100% {
        left: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <p id="txt" class="toptext" onMouseover="stopornot(0)" onMouseout="stopornot(1)">
      xuepiaorenjian
    <p>
  </div>
</body>
<script>
  function stopornot(ismove) {
    let dom = document.getElementById('txt')
    toggleClass(dom, 'static')
    toggleClass(dom, 'toptext')
  }
  // 工具方法
  function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  }

  function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
  }

  function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(reg, ' ');
    }
  }
  function toggleClass(obj, cls, als) {
    if (hasClass(obj, cls)) {
      removeClass(obj, cls)
    } else {
      addClass(obj, cls)
    }
  }

</script>

</html>

原文地址:https://www.cnblogs.com/wwj007/p/15343311.html