Javascript旋转鼠标悬停暂停？

Question

我正在尝试修改单词拨号，但我还不是一个 javascript 专业人士。如何在现有代码中悬停/鼠标悬停时暂停此拨号....................................... ...................................................... ...................................................... …………

html:

<h1>
  I feel like eating
    <ul class="word-rotate">  
      <li>chocolate</li> 
      <li>pizza</li>
      <li>chicken wings</li>
      <li>lobster</li>
      <li>cheesecake</li>
      <li>donuts</li>
      <li>coconut shrimp</li>
      <li>strawberry crepe</li>
    </ul>
</h1>

CSS:

body {
  margin: 0;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center; 
      align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  background: #8E24AA;
  color: #fff;
}

.word-rotate {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 10em;
  height: 1em;
  position: relative;
  display: inline-block;
}

.word-rotate li {
  height: 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

js:

var wr = document.querySelector(".word-rotate");

var words = wr.children;

var x = 0;
rotate(x);

setInterval(function () {
  x = ++x % words.length;
  rotate(x);
}, 1000);

function rotate(start) {
  for (var i = 0; i < words.length; ++i) {
    var j = (start + i) % words.length;
    var percent = j / words.length;
    var rad = percent * 2 * Math.PI;
    var ty = Math.sin(rad) * 200;
    var tz = 40 * Math.cos(rad) - 40;
    var op = (Math.cos(rad) + 1) / 2;
    words[i].style.transform = "perspective(100px) translateZ(" + tz + "px) translateY(" + ty + "%)";
    words[i].style.opacity = "" + op;
  }
}

Answer 1

您可以监听 onmouseover 和 onmouseout 事件，然后设置一个标志(进入时为 true，退出时为 false)来暂停滚动。

var pauseRotate = false;

wr.onmouseover = function() {
  pauseRotate = true;
}

wr.onmouseout = function() {
   pauseRotate = false;
}

在您的 setInterval 函数中，首先检查 pauseRotate 是否为 true，如果是，我们可以不执行任何操作就返回。

setInterval(function () {
  if(pauseRotate) return;
  x = ++x % words.length;
  rotate(x);
}, 1000);

var wr = document.querySelector(".word-rotate");

var words = wr.children;
var pauseRotate = false;

var x = 0;
rotate(x);

wr.onmouseover = function() {
  pauseRotate = true;
}

wr.onmouseout = function() {
  pauseRotate = false;
}

setInterval(function () {
  if(pauseRotate) return;
  x = ++x % words.length;
  rotate(x);
}, 1000);

function rotate(start) {
  for (var i = 0; i < words.length; ++i) {
    var j = (start + i) % words.length;
    var percent = j / words.length;
    var rad = percent * 2 * Math.PI;
    var ty = Math.sin(rad) * 200;
    var tz = 40 * Math.cos(rad) - 40;
    var op = (Math.cos(rad) + 1) / 2;
    words[i].style.transform = "perspective(100px) translateZ(" + tz + "px) translateY(" + ty + "%)";
    words[i].style.opacity = "" + op;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center; 
      align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  background: #8E24AA;
  color: #fff;
}

.word-rotate {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 10em;
  height: 1em;
  position: relative;
  display: inline-block;
}

.word-rotate li {
  height: 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

<h1>
  I feel like eating
    <ul class="word-rotate">  
      <li>chocolate</li> 
      <li>pizza</li>
      <li>chicken wings</li>
      <li>lobster</li>
      <li>cheesecake</li>
      <li>donuts</li>
      <li>coconut shrimp</li>
      <li>strawberry crepe</li>
    </ul>
</h1>