html - 将 3D 悬停效果应用于多个 Div

Question

我有这个 jQuery 3D 悬停效果: https://jsfiddle.net/qdc4v1jg/

该代码在应用于一个 div 时工作正常，但当它应用于多个 div 时，它就不起作用。

我尝试通过以下方式让代码与多个 div 一起使用:

• 将所有 HTML 和 CSS div ID 更改为 div 类
• 将 jQuery 代码从“document.getElementById('tilt')”更改为“document.getElementsByClassName('tilt')”

然而，这些改变都没有奏效。正如您在这里看到的:https://jsfiddle.net/qdc4v1jg/1/

如果有人能帮助我解决这个问题，我将不胜感激。再说一遍，我只需要这个 3D 悬停效果即可处理多个 div(数量不受限制)。

Answer 1

哇，这太酷了!如果我错了，请纠正我，但 getElementsByClassName 返回一个 HTML 集合，对吧？您是否需要将其转换为数组，然后使用“forEach”为每个数组添加一个事件监听器？

附注您的代码可能有一些我在 Stackoverflow 上见过的最好的评论(我是新人，所以我显然还没有看到太多，哈哈)

编辑:抱歉，我花了一段时间才回复!这是解决方案。 我已对所做的更改添加了评论。我基本上将大部分代码放在 forEach 下，以便所有内容都应用于我们创建的数组中的每个元素。

/* Store the elements with class "tilt" in elements */
let elements = Array.from(document.getElementsByClassName("tilt"));

/* For each 'item' in the "elements" array... */
elements.forEach((item) => {
  /* Assign each 'item' in the "elements" array to a variable called "el" */
  let el = item;

  /*
   * Add a listener for mousemove event
   * Which will trigger function 'handleMove'
   * On mousemove
   */
  el.addEventListener("mousemove", handleMove);

  /* Get the height and width of the element */
  const height = el.clientHeight;
  const width = el.clientWidth;

  /* Define function a */
  function handleMove(e) {
    /*
     * Get position of mouse cursor
     * With respect to the element
     * On mouseover
     */
    /* Store the x position */
    const xVal = e.layerX;
    /* Store the y position */
    const yVal = e.layerY;

    /*
     * Calculate rotation valuee along the Y-axis
     * Here the multiplier 20 is to
     * Control the rotation
     * You can change the value and see the results
     */
    const yRotation = 20 * ((xVal - width / 2) / width);

    /* Calculate the rotation along the X-axis */
    const xRotation = -20 * ((yVal - height / 2) / height);

    /* Generate string for CSS transform property */
    const string =
      "perspective(500px) scale(1.1) rotateX(" +
      xRotation +
      "deg) rotateY(" +
      yRotation +
      "deg)";

    /* Apply the calculated transformation */
    el.style.transform = string;
  }

  /* Add listener for mouseout event, remove the rotation */
  el.addEventListener("mouseout", function () {
    el.style.transform = "perspective(500px) scale(1) rotateX(0) rotateY(0)";
  });

  /* Add listener for mousedown event, to simulate click */
  el.addEventListener("mousedown", function () {
    el.style.transform = "perspective(500px) scale(0.9) rotateX(0) rotateY(0)";
  });

  /* Add listener for mouseup, simulate release of mouse click */
  el.addEventListener("mouseup", function () {
    el.style.transform = "perspective(500px) scale(1.1) rotateX(0) rotateY(0)";
  });
});

html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Styles for the tilt block */
.tilt {
  display: block;
  height: 200px;
  width: 300px;
  background-color: grey;
  margin: 50px auto;
  transition: box-shadow 0.1s, transform 0.1s;

  /*
     * Adding image to the background
     * No relation to the hover effect.
     */
  background-image: url(http://unsplash.it/300/200);
  background-size: 100%;
  background-repeat: no-repeat;
}

.tilt:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

  <div class="tilt">
    <!--  Container for our block  -->
  </div>

  <div class="tilt">
    <!--  Container for our block  -->
  </div>

  <div class="tilt">
    <!--  Container for our block  -->
  </div>