滚动文本（自动收报机）我怎样才能有效地设置它以便它可以多次使用？

Question

我正在使用 GreenSock/TweenMax 创建类似于此页面上的滚动文本：https://new-flavors.risekombucha.com/

Greensock 文档：https://greensock.com/get-started-js

我已经能够对他们创建的一些内容进行逆向工程，但我对他们如何多次使用它感到困惑（以及他们如何如此干净地工作，而我的却没有（犹豫，复制错误，不会运行永远）。

无论如何，我最关心的是如何让它在具有不同文本的同一页面上多次工作，而不必为每个实例重写整个代码块（如果可能）。

这是我的：

jQuery(function($){ /* GREENSOCK */
  /* TICKER <----------- Right */
  
   var $tickerWrapper = $(".tickerwrapper");
   var $list = $tickerWrapper.find("ul.list");
   var $clonedList = $list.clone();
   var listWidth = 10;

   $list.find("li").each(function (i) {
      listWidth += $(this, i).outerWidth(true);
   });

   var endPos = $tickerWrapper.width() - listWidth;

   $list.add($clonedList).css({
    "width" : listWidth + "px"
   });

   $clonedList.addClass("cloned").appendTo($tickerWrapper);

   //TimelineMax
   var infinite = new TimelineMax({repeat: -1, paused: true});
   var time = 100;

   infinite
     .fromTo($list, time, {rotation:0.01,x:0}, {force3D:true, x: -listWidth, ease: Linear.easeNone}, 0)
     .fromTo($clonedList, time, {rotation:0.01, x:listWidth}, {force3D:true, x:0, ease: Linear.easeNone}, 0)
     .set($list, {force3D:true, rotation:0.01, x: listWidth})
     .to($clonedList, time, {force3D:true, rotation:0.01, x: -listWidth, ease: Linear.easeNone}, time)
     .to($list, time, {force3D:true, rotation:0.01, x: 0, ease: Linear.easeNone}, time)
     .progress(1).progress(0)
     .play();

   //Pause/Play        
   $tickerWrapper.on("mouseenter", function(){
    infinite.pause();
   }).on("mouseleave", function(){
    infinite.play();
   });
});  
  // End Ticker

/* MARQUEE */
.tickerwrapper {
  /* the outer div */
  position: relative;
  top: 30px;
  left:0%;
  width: 100%;
  height: 42px; /* must match text */
/*  overflow: hidden;*/
  cursor: pointer;
}
.tickerwrapper ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}
.tickerwrapper ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}
.tickerwrapper ul.list li {
  float: left;
  padding-left: 20px;
 font-size: 42px!important;
 color: #e51313;
}
.tickerwrapper ul.list li span {
 font-size: 42px!important;
 text-transform: uppercase;
 color: #e51313;
}
.tickerwrapper li {
 -webkit-text-fill-color: #0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: currentColor;
}
.tickerwrapper span.solid {
 -webkit-text-fill-color: #e51313;
    -webkit-text-stroke-width: 0;
 font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<!-- FIRST LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
  </ul>
</div>


<!-- SECOND LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
  </ul>
</div>

Answer 1

试试这个（检查 $(".tickerwrapper").each(function(ix, ex){ 指令）：

jQuery(function($){ /* GREENSOCK */
  /* TICKER <----------- Right */
    $(".tickerwrapper").each(function(ix, ex){
            var $tickerWrapper = $(ex);
   var $list = $tickerWrapper.find("ul.list");
   var $clonedList = $list.clone();
   var listWidth = 10;

   $list.find("li").each(function (i) {
      listWidth += $(this, i).outerWidth(true);
   });

   var endPos = $tickerWrapper.width() - listWidth;

   $list.add($clonedList).css({
    "width" : listWidth + "px"
   });

   $clonedList.addClass("cloned").appendTo($tickerWrapper);

   //TimelineMax
   var infinite = new TimelineMax({repeat: -1, paused: true});
   var time = 100;

   infinite
     .fromTo($list, time, {rotation:0.01,x:0}, {force3D:true, x: -listWidth, ease: Linear.easeNone}, 0)
     .fromTo($clonedList, time, {rotation:0.01, x:listWidth}, {force3D:true, x:0, ease: Linear.easeNone}, 0)
     .set($list, {force3D:true, rotation:0.01, x: listWidth})
     .to($clonedList, time, {force3D:true, rotation:0.01, x: -listWidth, ease: Linear.easeNone}, time)
     .to($list, time, {force3D:true, rotation:0.01, x: 0, ease: Linear.easeNone}, time)
     .progress(1).progress(0)
     .play();

   //Pause/Play        
   $tickerWrapper.on("mouseenter", function(){
    infinite.pause();
   }).on("mouseleave", function(){
    infinite.play();
   });
    });       
});  
  // End Ticker

/* MARQUEE */
.tickerwrapper {
  /* the outer div */
  position: relative;
  top: 30px;
  left:0%;
  width: 100%;
  height: 42px; /* must match text */
/*  overflow: hidden;*/
  cursor: pointer;
}
.tickerwrapper ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}
.tickerwrapper ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}
.tickerwrapper ul.list li {
  float: left;
  padding-left: 20px;
 font-size: 42px!important;
 color: #e51313;
}
.tickerwrapper ul.list li span {
 font-size: 42px!important;
 text-transform: uppercase;
 color: #e51313;
}
.tickerwrapper li {
 -webkit-text-fill-color: #0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: currentColor;
}
.tickerwrapper span.solid {
 -webkit-text-fill-color: #e51313;
    -webkit-text-stroke-width: 0;
 font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<!-- FIRST LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
  </ul>
</div>


<!-- SECOND LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
  </ul>
</div>

滚动文本（自动收报机）我怎样才能有效地设置它以便它可以多次使用？

Scrolling Text (ticker) How can I set this up efficiently so it can be used multiple times?

javascript

jquery

gsap

滚动文本（自动收报机） 我怎样才能有效地设置它以便它可以多次使用？

Scrolling Text (ticker) How can I set this up efficiently so it can be used multiple times?

javascript

jquery

gsap

滚动文本（自动收报机）我怎样才能有效地设置它以便它可以多次使用？