我需要大家的幫助。我目前需要實作一個選框效果。黃色框需要向上滾動才能顯示名稱。每次滾動時，我都要在框的中間停留 1 秒鐘，然后才能繼續滾動。我可以在 Internet 上找到這樣的示例。，但是這個程式的邏輯對于城市初學者來說有點難以理解。想知道如果要實作這種跑馬燈效果，有沒有人愿意提供一種更簡單易懂的寫法？
對不起，我是程式初學者，目前邏輯比較復雜的程式比較難理解。
function slideLine(box, stf, delay, speed, h) {
var slideBox = document.getElementById(box);
var delay = delay || 1000,
speed = speed || 20,
h = h || 40;
var tid = null,
pause = false;
var s = function() {
tid = setInterval(slide, speed);
};
var slide = function() {
if (pause) return;
slideBox.scrollTop = 1;
if (slideBox.scrollTop % h == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
slideBox.scrollTop = 0;
setTimeout(s, delay);
}
};
setTimeout(s, delay);
}
slideLine("kanban_info", "p", 1000, 25, 40);.kanban {
position: absolute;
margin: 0 auto;
width: 278px;
height: 50px;
background-color: yellow;
left: 50%;
transform: translate(-50%);
text-align: center;
line-height: 6;
}
.kanban .kenban_wrap {
height: 38px;
transform: translateY(28px);
overflow: hidden;
}
.kanban .kenban_wrap .kanban_info {
line-height: 38px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kanban">
<div class="kenban_wrap" id='kanban_info'>
<p class="kanban_info">Allen</p>
<p class="kanban_info">james</p>
<p class="kanban_info">jack</p>
</div>
</div>uj5u.com熱心網友回復：
通過結合scroll-behavior以編程方式單擊的錨標記，您可以簡化它。這應該更容易理解，你可以從那里開始，即使它可能不是最好的解決方案。
let links = document.querySelectorAll("a"); // List of links
let div = document.querySelector("div");
let index = 0;
let t = 2000; // setTimeout duration
// Change Scroll behavior to prevent the animation from the last to first list item
function scrollBeh() {
if(index == 1) {
div.style.scrollBehavior = "auto";
t = 0; // Timeout duration to 0 to prevent `1` being shown longer than other list items
} else {
div.style.scrollBehavior = "smooth";
t = 2000;
}
}
// Loop through list items
function resetInd() {
if(index < 3) {
index ;
} else {
index = 0;
}
}
function clickLinks() {
links[index].click();
resetInd();
scrollBeh();
setTimeout(clickLinks, t);
}
setTimeout(clickLinks, t);div {
width: 200px;
height: 100px;
background-color: darkblue;
overflow: hidden;
scroll-behavior: smooth;
}
li {
height: 100px;
list-style: none;
}
a {
text-decoration: none;
color: #FFF;
font-size: 50px;
}<div>
<ul>
<li id="one"><a href="#one">1</a></li>
<li id="two"><a href="#two">2</a></li>
<li id="three"><a href="#three">3</a></li>
<li id="one_loop"><a href="#one_loop">1</a></li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439710.html
標籤：javascript jQuery css