Question

我正在尝试修改一个字盘，但我还不是一个javascript pro（还）。如何在现有代码中暂停/鼠标悬停此拨号.................................... .................................................. .................................................. ..........

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是否为真，如果是，我们可以在不做任何事情的情况下返回。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript旋转鼠标暂停？

1 个答案: