如何计算鼠标位置，如 0 将 return -8 和 1000 将 return 8 个数字？

Question

当我尝试使用 mousemove 事件 进入动画时，我遇到了如何获取 特定数字 的问题移动鼠标事件时左右方向的限制

如果鼠标位置在 500 内 1000 宽度的容器中，函数 应该 return 0

另外关于如何反转 return 如果它在 0 上它应该 return 8

HTML:

<div class="container">
  <h1>Mouse Move</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, 
    magni.
  </p>
</div>

CSS:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  background-color: #2c3e50;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: white;
  color: #2c3e50;
  max-width: 300px;
  padding: 15px;
  border-radius: 3px;
}

JS:

const CARD_CONTAINER = document.querySelector('.container');
let window_width = window.innerWidth;

window.addEventListener('mousemove', (event) => {
  let getTranslateX = (event.clientX / window_width) * 8;

  console.log(getTranslateX);

  CARD_CONTAINER.style.transform = `translateX(-${getTranslateX}px)`;
});

Answer 1

const ANIMATION_WIDTH=1000;
const RANGE=8;
const result=(mousePosition-(ANIMATION_WIDTH/2))*RANGE/(ANIMATION_WIDTH/2);

如何计算鼠标位置，如 0 将 return -8 和 1000 将 return 8 个数字？

How to calculate a mouse position like 0 will return -8 and 1000 will return 8 number?

javascript

math

animation