javascript - 滚动文本(股票代码) 我怎样才能有效地设置它,以便它可以多次使用?
问题描述
我正在使用 GreenSock/TweenMax 创建类似于在此页面上可以找到的滚动文本:https ://new-flavors.risekombucha.com/
Greensock 文档:https ://greensock.com/get-started-js
我已经能够对他们创造的一些东西进行逆向工程,但我一直在纠结他们是如何多次使用这个的(以及他们的工作如何如此干净,而我的却没有(犹豫、复制错误、没有) t永远运行)。
无论如何,我最关心的是如何让它在同一页面上使用不同的文本多次工作,而不必为每个实例重写整个代码块(如果可能的话)。
这是我所拥有的:
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>
解决方案
试试这个(检查$(".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>
推荐阅读
- crashlytics - Fabric 初始部署
- google-bigquery - Google BigQuery 的 PostGIS 可用性
- javascript - Node js挂在端口3000我必须重新启动PC才能解锁它
- nlp - 句子与文档级别分析的最佳词典
- python - PyVISA - AttributeError:“NIVisaLibrary”对象没有属性“viParseRsrcEx”
- c# - Automapper:展平
- html - 看起来我的代码禁用显示在移动版本上,请有人帮助我
- python - 用分隔符重塑熊猫数据框列
- asp.net-mvc - MapRoute()不工作
- javascript - 在锚标记中包装 React Semantic-UI Menu.Item 而不会破坏它的样式