Why is deprecated and what is the best alternative?

前端 未结

关注

 6  1229

借酒劲吻你 2020-11-27 04:52

Longer time I\'m curious about HTML tag .

You can find in MDN specification:

Obsolete This feat

6条回答

• 

  挽巷 (楼主)

  2020-11-27 05:15

  I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from @Stano answere from here

  Here is the code:

  jQuery(function ($) {
  
      if ($('marquee').length == 0) {
          return;
      }
  
      $('marquee').each(function () {
  
          let direction = $(this).attr('direction');
          let scrollamount = $(this).attr('scrollamount');
          let scrolldelay = $(this).attr('scrolldelay');
  
          let newMarquee = $('
  ');
          $(newMarquee).html($(this).html());
          $(newMarquee).attr('direction',direction);
          $(newMarquee).attr('scrollamount',scrollamount);
          $(newMarquee).attr('scrolldelay',scrolldelay);
          $(newMarquee).css('white-space', 'nowrap');
  
          let wrapper = $('
  ').append(newMarquee);
          $(this).replaceWith(wrapper);
  
      });
  
      function start_marquee() {
  
          let marqueeElements = document.getElementsByClassName('new-marquee');
          let marqueLen = marqueeElements.length
          for (let k = 0; k < marqueLen; k++) {
  
  
              let space = '     ';
              let marqueeEl = marqueeElements[k];
  
              let direction = marqueeEl.getAttribute('direction');
              let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
              let scrollamount = marqueeEl.getAttribute('scrollamount');
  
              let marqueeText = marqueeEl.innerHTML;
  
              marqueeEl.innerHTML = marqueeText + space;
              marqueeEl.style.position = 'absolute'; 
  
              let width = (marqueeEl.clientWidth + 1);
              let i = (direction == 'rigth') ? width : 0;
              let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
  
              marqueeEl.style.position = '';
              marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
  
  
  
              let x = setInterval( function () {
  
                  if ( direction.toLowerCase() == 'left') {
  
                      i = i < width ? i + step : 1;
                      marqueeEl.style.marginLeft = -i + 'px';
  
                  } else {
  
                      i = i > -width ? i - step : width;
                      marqueeEl.style.marginLeft = -i + 'px';
  
                  }
  
              }, scrolldelay);
  
          }
      }
  
      start_marquee ();
  });
  

  And here is a working codepen
  0 讨论(0)

  查看其它6个回答
  发布评论:

  提交评论

  ---

  •  加载中...

验证码

 看不清?

提交回复

热议问题