Why do I use javascript to make the marquee effect and it will shake when it is running?

user_11241725 0
Viewed 89

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>

css javascript
1 Answers

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.

css

: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));
}

javascript

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>

user_155451160
Related