Tengo algunos problemas con el efecto de marquesina usando JavaScript. Debería detenerse en el medio cuando se desplaza, pero no puede detenerse en el medio en este momento, sacudirá el efecto. ¿Cómo puedo arreglar esto?
He resuelto el problema durante mucho tiempo solo, así que vine a preguntarles a todos, gracias.
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>Supongo que puedes lograr esto con esta transformación css. Pero funcionará, si el último parámetro debe ser el mismo que la altura del div en la función slideLine y controlar la velocidad con el cuarto parámetro.
: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>