Javascript Marquee to replace tags

前端 未结

关注

 6  1791

再見小時候 2020-11-27 07:41

I\'m hopeless at Javascript. This is what I have:

6条回答

• 

  有刺的猬 (楼主)

  2020-11-27 08:01

  Working with @Stano code and some jQuery I have created a script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount.

  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个回答
  发布评论:

  提交评论

  ---

  •  加载中...

验证码

 看不清?

提交回复

热议问题