javascript - Mousemove 事件 - 基于鼠标位置的 div 位置正在反转

Question

编辑 - 这是一个 fiddle :http://jsfiddle.net/cLahpqoj/1/这是我正在尝试做的一个例子:https://www.seventh.tv/

---

也许我在设置门位置方面的数学不好，把事情搞砸了。注意到鼠标位置和门的位置正在改变值的位置。记录:

{doorX: -1066, x: 396, doorY: -1367, y: 164}
{doorX: 396, x: -1065, doorY: 164, y: -1367}

来自:

   let mouseX =  e.offsetX;
        let mouseY = e.offsetY;

        let doorX = currentDoorRect.x;
        let doorY = currentDoorRect.y;

        let x = doorX;
        let y = doorY;

        x =  -( x + (mouseX) );
        y =  -( y + (mouseY) );

        let transform = 'translate(' + x + 'px,' + y + 'px)';
        currentDoor.style.transform = transform;




          console.log( {
            doorX,
            x,
            doorY,
            y
          });

---

我正在尝试根据当前 div 位置和鼠标位置使用 transform:translate(x,y) css 属性移动一个 div。

我正在记录传递给转换更改的 x 和 y 值，并注意每个值的更改，其中有一个在进行，其中包含类似 x: -1, y:0 的内容，然后立即回到值应该是什么(即 x:-563, y:424)

我正在使用 Vue.js，函数是:

<template>
  <div ref="test-container" id="test-container" class="h-full relative" 
  @mousedown.prevent="disableMiddleClickScroll"
  @mousemove="moveDoors"
  @wheel="disableWheelScroll">
    <div
      :ref="`door-${index}`"
      v-for="index in numDoors" :key="index"
      class="door bg-gray-300 p-8  text-center rounded flex-none">
      Door
      </div>
  </div>
</template>

...

moveDoors(e) {
        let mouseX =  e.offsetX;
        let mouseY = e.offsetY;

   
          let currentDoor = this.$refs[`door-1`];
          let currentDoorRect = currentDoor.getBoundingClientRect();

          let doorX = currentDoorRect.x;
          let doorY = currentDoorRect.y;

          let x =  -( doorX + (mouseX) );
          let y =  -( doorY + (mouseY) );

          console.log( {
            x,
            y
          });

          let transform = 'translate(' + x + 'px,' + y + 'px)';
          currentDoor.style.transform = transform;

    
        
      },

事件是这样调用的:

控制台日志示例:

{x: 1, y: -0}
{x: -547, y: -426}
{x: 1, y: -0}
{x: -545, y: -426}
{x: -0, y: 1}
{x: -544, y: -425}
{x: -0, y: 1}
{x: -546, y: -424}
{x: -1, y: -0}

容器 CSS 是:

#test-container {
  position: fixed;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    
}

如果没有足够的信息进行调试，请告诉我。我认为这就是所有相关的内容。

Answer 1

如果你想要的是这个网站正在做的，那么是的，你的数学不是你需要的，你的策略也有点偏差。
他们所做的是从视口(viewport)位置到内容位置的简单映射。您不需要单独移动每个元素，只需移动主容器即可。

基本上，如果您将光标移动到视口(viewport)的中心，内容将移动，使其中心位于视口(viewport)的中心。如果将其移至屏幕的左上角，则内容将移动，以便您看到内容的左上角。

要做到这一点，有多种策略。一种是将鼠标位置映射到 [0, 1] 范围，然后将该比率乘以内容的大小。然后，您只需将视口(viewport)大小调整一半，即可使整体正确居中。

const content = document.querySelector(".content");

document.onmousemove = (evt) => {
  // the mouse position (in the viewport)
  const viewport_x = evt.clientX;
  const viewport_y = evt.clientY;
  // the viewport size
  const viewport_width  = window.innerWidth;
  const viewport_height = window.innerHeight;
  // the mouse position, still relative to the viewport
  // but in a range [0, 1]
  const ratio_x = viewport_x / viewport_width;
  const ratio_y = viewport_y / viewport_height;
  
  // our content's size
  const content_rect = content.getBoundingClientRect();
  const content_width = content_rect.width;
  const content_height = content_rect.height;
  // transform the mouse position to the content's position
  const content_x = content_width * ratio_x;
  const content_y = content_height * ratio_y;
  // remove it from half the size of the viewport
  // so that aiming at the center of the viewport
  // shows the center of our content
  const translate_x = viewport_width  / 2 - content_x;
  const translate_y = viewport_height / 2 - content_y;

  content.style.setProperty("--translate-x", translate_x + "px");
  content.style.setProperty("--translate-y", translate_y + "px");

};

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  transition: transform .5s ease-out;
  width: 150vw;
  height: 250vh;
  transform: translate(var(--translate-x), var(--translate-y));
  --translate-x: -25vw; /* (150vw - 100vw) / 2 */
  --translate-y: -75vh; /* (250vh - 100vw) / 2 */
}
.frame {
  border: 1px solid;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  counter-increment: frame;
}
.frame::after {
  content: counter(frame);
}
body, :root {
  overflow: auto;
  border: 0px;
}

<div class="content">
  <div class="frame"></div>  
  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>
</div>