jQuery 将动画翻译转换为纯 JavaScript

Question

我正在尝试使用我在 Stack-Overflow 上找到的以下字幕代码：

Javascript Marquee to replace <marquee> tags

完整的源代码示例在这里：

https://www.sanwebcorner.com/2016/07/marquee-text-without-marquee-tag-using.html

我想将 jQuery 动画转换为纯 JavaScript（我正在考虑 JavaScript 动画）。

jQuery代码如下：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');
     });
  </script>

  <div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!</div>
  </div>

选取框效果很好，但我试图避免 jQuery 的开销并使用纯 JavaScript.

Answer 1

发布问题之前我一直在纠结这个问题，发布之后我继续解决这个问题。事实上，我之前尝试过最终的解决方案，但不正确。我的 CSS 比 M. Lak (sanwebcorner.com) 的例子更通用一些。我希望能够定义多个不同宽度的选取框。

<style type='text/css'>
.gc-marquee {
  min-height: 28px;
  overflow: hidden;
  position: relative;
}
.gc-marquee > .gc-scrollingtext {
  white-space: nowrap;
  position: absolute;
}
</style>

为了渲染选取框，我希望对 duration/speed 进行编码，所以我使用了数据属性。文本可以是任意数量的 HTML 个标签。

  <div class="gc-marquee" id="marq-1" style="height: 80px;background-color: black;color: #dddddd;">
    <h3 class="gc-scrollingtext" data-millisec="16000" style="margin: 15px auto;font-weight: bold;">Short marquee text!</h3>
  </div>

最后，真正的问题是JavaScript。我被纯粹的 CSS 选取框弄糊涂了。我最终理解了问题并超越了语法。

<script>
  var marqueesToShowOnce = document.querySelectorAll( 'div.gc-marquee > .gc-scrollingtext' );
  function gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth ) {
    if( gc_marquee == undefined || gc_marquee == null || millisec < 1000 ) {
      console.log( `gc_marquee_loop: ERROR, ${millisec} ${txtWidth} ${parWidth}` );
      return;
    }
    setTimeout( function( ) {
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    }, millisec );
  }
  if( marqueesToShowOnce.length > 0 ) {
    Array.prototype.forEach.call(marqueesToShowOnce, function( gc_marquee ) {
      var millisec = parseInt( gc_marquee.dataset.millisec );
      var txtWidth = gc_marquee.offsetWidth;
      var parWidth = gc_marquee.parentElement.offsetWidth;
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    } );
  }
</script>

字幕效果很好，现在我可以避免 jQuery 的开销并使用纯 JavaScript。

jQuery 将动画翻译转换为纯 JavaScript

jQuery transform animate translation to pure JavaScript

javascript

css

animation