I have some problems with the marquee effect using JavaScript. It should stop in the middle when scrolling, but it can't stop in the middle at present, it will shake effect. How can I fix this?
I have solved the problem for a lot of time by myself, so I came up to ask everyone, thank you
function slideLine(box,stf,delay,speed,h)
{
var slideBox = document.getElementById(box);
var delay = delay||1000,speed = speed||20,h = h||20;
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);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(s, delay);
}
slideLine('ann_box','div',2000,25,20);.ann{
overflow:hidden;
height:60px;
background-color: #ccc;
text-align:center;
}<div id="ann_box" class="ann" style="width:868px;">
<div id="a1" class="ann">HTML</div>
<div id="a2" class="ann">CSS</div>
<div id="a3" class="ann">Vue</div>
<div id="a4" class="ann">javascript</div>
</div>I guess, you can achieve this this css transform. But it will work , if the last parameter should be the same as the div's height in the slideLine function and control the speed with the fourth parameter.
:root {
--height: 60px; /* Same as last parameter in function */
}
#ann_box {
min-width: 400px;
height: var(--height);
overflow: hidden;
border: 1px solid rgba(255, 0, 0, 0.4);
}
.ann {
height: inherit;
text-align: center;
line-height: 1; /* new line */
/* height / 2 - 10px = transform to define center */
transform: translateY(calc(var(--height) / 2 - 10px));
}
slideLine('ann_box', 'div', 2000, 25, 60); // The last parameter should be 60
function slideLine(box, stf, delay, speed, h) {
var slideBox = document.getElementById(box);
var delay = delay || 1000,
speed = speed || 50,
h = h || 20;
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);
}
};
slideBox.onmouseover = function() {
pause = true;
};
slideBox.onmouseout = function() {
pause = false;
};
setTimeout(s, delay);
}
slideLine('ann_box', 'div', 2000, 10, 60); // The last parameter should be 60*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
:root {
--height: 60px; /* Same as last parameter in function */
}
#ann_box {
min-width: 400px;
height: var(--height);
overflow: hidden;
border: 1px solid rgba(255, 0, 0, 0.4);
}
.ann {
height: inherit;
text-align: center;
line-height: 1; /* new line */
/* height / 2 - 10px = transform to define center */
transform: translateY(calc(var(--height) / 2 - 10px));
}
/* height 30px = transform 5px */
/* height 40px = transform 10px */
/* height 50px = transform 15px */
/* height 60px = transform 20px */<div id="ann_box">
<div id="a1" class="ann">HTML</div>
<div id="a2" class="ann">CSS</div>
<div id="a3" class="ann">Vue</div>
<div id="a4" class="ann">javascript</div>
</div>