At present, I need to make a scrolling marquee effect in the project, but I encountered two problems during the production process. I don’t know the reason? I hope everyone can help me look at the code, or provide some more Good wording!
Question one hopes that when the marquee scrolls up, each one can stay for one second, and then continue to scroll! But currently it will scroll two consecutively, and then stop at a strange place, not in the middle of the block .
Question 2: I hope that the marquee effect needs to be activated only when there are two paragraphs of text. If there is only one paragraph, the marquee effect will not be used.
Since I have just learned JavaScript and I am not very familiar with it, I hope I can get your help, thank you!
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: 17px;
left: 50%;
transform: translate(-50%);
text-align: center;
line-height: 2;
}
.kanban .kenban_wrap {
height: 30px;
overflow: hidden;
}<div class="kanban">
<div class="kenban_wrap" id='kanban_info'>
<p class="kanban_info">hello</p>
<p class="kanban_info">world</p>
<p class="kanban_info">javascript</p>
<p class="kanban_info">HTML</p>
<p class="kanban_info">CSS</p>
</div>
</div>