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

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>