zoukankan      html  css  js  c++  java
  • 原生html标签marquee被废弃后js解决方案

      let Omarquee = document.getElementById(el)
      let timer = null
    
      scroll();
      Omarquee.addEventListener('mouseenter', function () {
        window.clearInterval(timer);
      })
      Omarquee.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
          if (offset == scrollWeight) {
            offset = 0;
          }
          Omarquee.style.marginLeft = "-" + offset + "px";
          offset += 1;
        }, 50);
      })
    
      var offset = 0;
      var scrollWeight = Omarquee.offsetWidth;
      var length = Omarquee.children.length;
    
      function scroll() {
        for (var i = 0; i < length - 1; i++) {
          var node = Omarquee.children[i].cloneNode(true);
          Omarquee.appendChild(node);
        }
        timer = setInterval(function () {
          if (offset == scrollWeight) {
            offset = 0;
          }
          Omarquee.style.marginLeft = "-" + offset + "px";
          offset += 1;
        }, 50);
      }
    

      

  • 相关阅读:
    梯度消失和梯度爆炸
    BN的作用与使用过程
    百面机器学习笔记(二)
    正则表达式
    CSS Sprite
    事件绑定
    拖拽
    oncontextmenu
    鼠标跟随
    鼠标事件
  • 原文地址:https://www.cnblogs.com/crazy-rock/p/14987436.html
Copyright © 2011-2022 走看看