滚动文本（股票代号）如何有效设置它以便可以多次使用？

时间：2019-07-18 16:23:33

标签： javascript jquery greensock tweenmax

我正在使用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>

1 个答案:

答案 0 :(得分：3)

尝试一下（检查$(".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>

相关问题
最新问题