gpt4 book ai didi

javascript - 如何正确使用跑马灯?

转载 作者:行者123 更新时间:2023-11-28 14:44:57 25 4
gpt4 key购买 nike

我需要标签<a>进入要复制的 DIV 命名框,以在所有行选框上显示文本,没有剪切,我是新来的,所以如果您需要更多信息,请发表评论,我会立即更新,谢谢。

$('.box').marquee({
duration: 20000,
gap: 0,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
.box {
margin: auto;
width: 100%;
height: 50px;
overflow: hidden;
}

.box1 {
margin-top: 14px;
position: relative;
}

.box1 li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box">
<ul class="box1">
<li>
<a>TEXT MARQUEE</a>
<a>TEXT MARQUEE</a>
</li>
</ul>
</div>

最佳答案

好的,我知道问题出在哪里了,当当前滚动文本触及框的左边框时,里面的内容会重复。

因此,要获得无缝的无限选取框效果,您的文本必须占屏幕宽度的 100%……这很难实现。

如果你限制它可以工作的框的宽度,请参见示例:

$('.box').marquee({
duration: 4000,
gap: 20,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});

$('.box2').marquee({
duration: 4000,
gap: 20,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
.box {
margin: auto;
width: 300px;
font-size: 20px;
line-height:1.2;
height: 1.2em;
overflow: hidden;
margin-bottom: 1em;
}
.box--1 {
background: rgba(255,0,0,.2);
}
.box--2 {
background: rgba(255,0,0,.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<div class="box box--1">
<a>TEXT MARQUEE</a>
</div>

<div class="box box--2">
<a>the longer the text gets the better this endless scrolling works</a>
</div>

我不知道是否有更好的 js 解决方案,但您真正想要的是每次最后一个触摸框的边界时复制。这样就会有源源不断的新文本流进来,不管文本有多长。

干杯

关于javascript - 如何正确使用跑马灯?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52445719/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com