使用 GSAP 悬停时显示光标图像 - 中心问题答案

【问题标题】：Show cursor image on hover with GSAP - center issue使用 GSAP 悬停时显示光标图像 - 中心问题
【发布时间】：2021-08-20 14:02:50
【问题描述】：

我正在使用 GSAP 在悬停时显示一个图像，该图像在移动时跟随光标，一切正常，但我无法让图像“居中”光标，我错过了什么？

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>

【问题讨论】：

标签： javascript css gsap

【解决方案1】：

您需要从.container img 中删除left: 50%;。

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>

【讨论】：

这行得通，非常感谢！也许在 x 偏移后删除 'top:50%' 并添加 ', y: e.offsetY' 也很有趣，这样当你的鼠标上下移动时它也会居中（我只是注意到这也不起作用）。见：codepen.io/pixelarchitect/pen/abWeQJa
@Erwin 预期的输出是什么？我看到图像完全以鼠标为中心（水平和垂直）。
它完全符合我的要求，但是当您垂直移动鼠标时，图像会停留在中心并且不会上下移动，通过一些小的调整，图像光标实际上会在两个垂直方向上跟随您和水平的。 :)