动滚动

动滚动

关注
发信
关注(28)粉丝(399)

javascript - 悬停时停止自动滚动

使用下面的代码段，标签div将每0.5秒自动滚动一次。



quadroDeAvisos = document.getElementById("quadroDeAvisos")
lineUp = document.getElementById("lineUp")
avisos = lineUp.getElementsByClassName("avisos")

var count = 0;
var limite = avisos.length -1;
var myVar=setInterval(function(){atualiza()},500);

function atualiza() {
  if(count == limite)
    count = 0;
  lineUp.style.marginTop = 62*count*(-1)+"px"
  count++
}

.quadroDeAvisos{
  width: 134px;
  height: 125px;
  overflow: hidden;
}
#quadroDeAvisos .avisos {
  background-color: #ee9d20;
  border-color: #ba7c18;
}
.avisos {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  color: #fff;
  height: 50px;
  width: 132px;
  font-size: 12px;
  padding: 0;
  overflow: hidden;
}
.avisos p {
  padding: 0;
  margin: 5px 0;
}
.lineUp{
  transition: 1s;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Auto Scroll</title>


  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>

</head>

<body>

  <div class="quadroDeAvisos" id="quadroDeAvisos" style="margin-top: 0px; width: 25%; height: 160px; border: 0; overflow: hidden; overflow-y: scroll;">
<div class="lineUp" id="lineUp">
<div class="avisos">
  <p>LOTERICA BOA SORTE</p>
<p>#Lotes : 4.957</p>
</div>
<div class="avisos">
  <p>TREVO DA SORTE</p>
<p>#Lotes : 4.399</p>
</div>
<div class="avisos">
  <p>LOTERICA PE QUENTE</p>
<p>#Lotes : 3.602</p>
</div>
<div class="avisos">
  <p>LOTERIA BOA SORTE</p>
<p>#Lotes : 3.066</p>
</div>
<div class="avisos">
  <p>MEGA SORTE</p>
<p>#Lotes : 3.066</p>
</div>
<div class="avisos">
  <p>PONTO DA SORTE</p>
<p>#Lotes : 2.468</p>
</div>
<div class="avisos">
  <p>LOTERICA TREVO DA SORTE</p>
<p>#Lotes : 2.385</p>
</div>
<div class="avisos">
  <p>LOTERICA CENTRAL</p>
<p>#Lotes : 2.208</p>
</div>
<div class="avisos">
  <p>NOVA LOTERICA BARIRI</p>
<p>#Lotes : 2.178</p>
</div>
<div class="avisos">
  <p>LOTERICA MEGA SORTE</p>
<p>#Lotes : 2.165</p>
</div>
<div class="avisos">
  <p>CASA DA SORTE</p>
<p>#Lotes : 2.123</p>
</div>
<div class="avisos">
  <p>SORTE GRANDE</p>
<p>#Lotes : 1.935</p>
</div>
<div class="avisos">
  <p>TREVO LOTERIAS</p>
<p>#Lotes : 1.822</p>
</div>
<div class="avisos">
  <p>ESTRELA DA SORTE</p>
<p>#Lotes : 1.719</p>
</div>
<div class="avisos">
  <p>LOTERICA AVENIDA</p>
<p>#Lotes : 1.543</p>
</div>
<div class="avisos">
  <p>LOTERICA DA SORTE</p>
<p>#Lotes : 1.311</p>
</div>
<div class="avisos">
  <p>LOTERICA BRASIL</p>
<p>#Lotes : 1.257</p>
</div>
<div class="avisos">
  <p>LOTERICA VITORIA</p>
<p>#Lotes : 920</p>
</div></div></div>



</body>

</html>





我想要发生的是，我希望它停止在鼠标悬停时自动滚动，以便用户可以手动滚动它。有人可以指导我如何完成此工作或任何可能有用的链接吗？将不胜感激任何答复/帮助。谢谢！

最佳答案

您可以尝试将布尔值设置为false。然后，我建议将事件监听器添加到var avisos中。一个用于mouseover，另一个用于mouseout。在称为“布尔”的函数内部。最后，在调用atualiza();函数之前，请检查布尔值是否为true。如果是真的，则返回。我在示例中添加了一些评论。我希望这有帮助 ：）。



quadroDeAvisos = document.getElementById("quadroDeAvisos");
lineUp = document.getElementById("lineUp");
avisos = document.querySelectorAll(".avisos");

var count = 0;
var limite = avisos.length - 1;
// set the boolean to false initially
var isPaused = false;

// loop thru the HTMLCollection
avisos.forEach(function(x) {
  // add event listeners
  x.addEventListener("mouseover", pauseScroll);
  x.addEventListener("mouseout", pauseScroll);
})

var myVar = setInterval(function(event) {
  if (isPaused) return;
  atualiza();
}, 500);

function pauseScroll(event) {
  // toggle boolean var
  isPaused = !isPaused;
}

function atualiza() {
  if (count == limite) count = 0;
  lineUp.style.marginTop = 62 * count * -1 + "px";
  count++;
}

.quadroDeAvisos {
  width: 134px;
  height: 125px;
  overflow: hidden;
}

#quadroDeAvisos .avisos {
  background-color: #ee9d20;
  border-color: #ba7c18;
}

.avisos {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  color: #fff;
  height: 50px;
  width: 132px;
  font-size: 12px;
  padding: 0;
  overflow: hidden;
}

.avisos p {
  padding: 0;
  margin: 5px 0;
}

.lineUp {
  transition: 1s;
}

<div class="quadroDeAvisos" id="quadroDeAvisos" style="margin-top: 0px; width: 25%; height: 160px; border: 0; overflow: hidden; overflow-y: scroll;">
  <div class="lineUp" id="lineUp">
    <div class="avisos">
      <p>LOTERICA BOA SORTE</p>
      <p>#Lotes : 4.957</p>
    </div>
    <div class="avisos">
      <p>TREVO DA SORTE</p>
      <p>#Lotes : 4.399</p>
    </div>
    <div class="avisos">
      <p>LOTERICA PE QUENTE</p>
      <p>#Lotes : 3.602</p>
    </div>
    <div class="avisos">
      <p>LOTERIA BOA SORTE</p>
      <p>#Lotes : 3.066</p>
    </div>
    <div class="avisos">
      <p>MEGA SORTE</p>
      <p>#Lotes : 3.066</p>
    </div>
    <div class="avisos">
      <p>PONTO DA SORTE</p>
      <p>#Lotes : 2.468</p>
    </div>
    <div class="avisos">
      <p>LOTERICA TREVO DA SORTE</p>
      <p>#Lotes : 2.385</p>
    </div>
    <div class="avisos">
      <p>LOTERICA CENTRAL</p>
      <p>#Lotes : 2.208</p>
    </div>
    <div class="avisos">
      <p>NOVA LOTERICA BARIRI</p>
      <p>#Lotes : 2.178</p>
    </div>
    <div class="avisos">
      <p>LOTERICA MEGA SORTE</p>
      <p>#Lotes : 2.165</p>
    </div>
    <div class="avisos">
      <p>CASA DA SORTE</p>
      <p>#Lotes : 2.123</p>
    </div>
    <div class="avisos">
      <p>SORTE GRANDE</p>
      <p>#Lotes : 1.935</p>
    </div>
    <div class="avisos">
      <p>TREVO LOTERIAS</p>
      <p>#Lotes : 1.822</p>
    </div>
    <div class="avisos">
      <p>ESTRELA DA SORTE</p>
      <p>#Lotes : 1.719</p>
    </div>
    <div class="avisos">
      <p>LOTERICA AVENIDA</p>
      <p>#Lotes : 1.543</p>
    </div>
    <div class="avisos">
      <p>LOTERICA DA SORTE</p>
      <p>#Lotes : 1.311</p>
    </div>
    <div class="avisos">
      <p>LOTERICA BRASIL</p>
      <p>#Lotes : 1.257</p>
    </div>
    <div class="avisos">
      <p>LOTERICA VITORIA</p>
      <p>#Lotes : 920</p>
    </div>
  </div>
</div>

10-07 19:05
Powered by LMLPHP ©2024 动滚动 0.042530