对多个 Div 应用倾斜 3D 悬停效果

问题描述 投票：0回答：2

我有这个 JavaScript“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（数量不受限制）。

javascript html css
2个回答
4
投票

哇，太酷了！如果我错了，请纠正我，但 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>

0
投票

Javascript

  • 只需将 Javascript 移至函数即可
  • 使用 
    document.querySelectorAll('.tilt')
    创建元素列表
  • 删除
    let el = document.getElementById('tilt')
  • 循环元素列表并将“倾斜”侦听器附加到找到的每个元素

CSS

  • 将所有ID 
    #tilt
    更改为班级
    .tilt
  • 不要修改 
    <HTML>
    ，而是使用 
    <body>
    或 
    .wrapper
    代替

HTML

  • 使用 
    class="tilt"
    • 添加任意数量的“倾斜元素”

片段（在SO上“全页”查看）

//Traverse an array and execute the passed callback function for each array element found
var forEachEntryIn = function (array, callback, scope) {
 for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); } };

// Create a list of 'tilted' element ojects 
var elList = document.querySelectorAll('.tilt');
// can be any comma delimited selector list, not just '.tilt'

// Attach the tilt listeners to the list of elements
forEachEntryIn(elList, function (idx,el,scope) { connectListener(el); } );

/* 
 * Packed original code in function connectListener()
 * parameter: element object to attach listenener to
 */
function connectListener(el) {

/* Store the element in el */
//let el = document.getElementById('tilt') // REMOVE

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

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

    /* 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)';
    });
};
body {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center; /* CORRECTED, was 'align-contents' */
    height: 100%;
}
/*
    Changed all ID #tilt to Class .tilt 
*/
/* Styles for the tilt block */
.tilt {
    display: block;
    height: 200px;
    width: 300px;
    background-color: grey;
    margin: 3rem auto; /* MOD from '0' to add some space */

    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"></div>
<div class="tilt"></div>
<div class="tilt"></div>
<div class="tilt"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.