我正在使用内联 block 元素制作选取框。 目前,我的问题是以有效的方式实现无限滚动。 卷轴的结尾看起来像这样:
开始位置是:
但我需要实现无限效果。我不确定如何解决这个问题,无论是通过交换内部元素还是其他方式。
你能帮我解决这个小元素的剩余部分吗?
作为引用,结束位置应该是这样的:
代码很简单(See CodePen here):
HTML
<div class="viewport" id="viewport">
<div class="wrapper" id="wrapper">
<div class="item">1</div><div
class="item">2</div><div
class="item">3</div><div
class="item">4</div><div
class="item">5</div><div
class="item">6</div><div
class="item">7</div><div
class="item">8</div><div
class="item">9</div><div
class="item">10</div>
</div>
</div>
CSS
.viewport {
position: relative;
margin: 0 auto;
padding: 20px 0;
width: 200px
}
.wrapper {
position: relative;
display: inline-block;
white-space: nowrap;
transition: 0.8s ease-in-out all;
}
.item {
display: inline-block;
width: 25px;
height: 25px;
}
JS
var scroller = document.getElementById('wrapper');
function start() {
for ( var i = 0;
i < scroller.children.length;
i++ ) {
(function(j) {
var timeout = 1000*j;
setTimeout(function() {
var left = -scroller.children[j].offsetWidth * j,
leftPx = left + 'px';
scroller.style.left = leftPx;
}, timeout)
})(i);
}
}
start();
最佳答案
我假设您想知道如何让函数继续运行,而不是如何让它恢复动画。调用函数 MyFunction();
在开始结束时,在那个电话结束时start
.例如:
var scroller = document.getElementById('wrapper');
function start() {
for ( var i = 0;
i < scroller.children.length;
i++ ) {
(function(j) {
var timeout = 1000*j;
setTimeout(function() {
var left = -scroller.children[j].offsetWidth * j,
leftPx = left + 'px';
scroller.style.left = leftPx;
}, timeout)
})(i);
}
MyFunction();
}
// Reverse function here
start();
或者,您可以使用 <marquee>
标记而不是所有这些脚本。
关于javascript - 内联 block 元素的纯 javascript 水平选取框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26768299/