javascript - 用javascript鼠标位置改变图像？

Question

我正在尝试实现类似于此网站上显示的效果:https://ca.warbyparker.com/eyeglasses/women/louise/elderflower-crystal

当您移动鼠标位置(或移动设备的拇指)时，显示的图像将根据鼠标的水平位置而变化。

我一直在尝试让它在 React 中工作，但遇到了一些麻烦，即使获得了一个有效的 jquery 或 vanilla javascript 解决方案，我似乎也无法得到它。

到目前为止我所得到的:

HTML:

<div class="product-hero">

        <div class="hero-container">
          <img class="product-hero-image left" src="http://placehold.it/708x1282/000000?text=%3C%E2%80%93+left" alt="" />
          <img class="product-hero-image middle" src="http://placehold.it/708x1282/000000?text=middle" alt="" />
          <img class="product-hero-image right" src="http://placehold.it/708x1282/000000?text=right+--%3E" alt="" />

        </div>
      </div>

Javascript:

$(window).mousemove(getMousePosition);

    function getMousePosition(event) {
      let imageTop = $('.product-hero-image').offset().top;
      let imageLeft = $('.product-hero-image').offset().left;
      let imageBottom = imageTop + $('.product-hero-image').height();
      let imageRight = imageLeft + $('.product-hero-image').width();

      var mouseX = event.pageX;
      var mouseY = event.pageY;

      if (mouseX > imageLeft && mouseX < imageRight && mouseY < imageTop) {
        $('.product-hero-image.middle').toggle();
        console.log('top right');
      } else if (mouseX < imageLeft && mouseY < imageTop) {
        $('.product-hero-image.left').toggle();
        console.log('top left');
      } else if (mouseX < imageLeft && mouseY > imageTop && mouseY < imageBottom) {
        $('.product-hero-image.left').toggle();
        console.log('bottom left');
      } else if (mouseX < imageLeft && mouseY > imageBottom) {
        $('.product-hero-image.left').toggle();
        console.log('left');
      } else if (mouseX > imageLeft && mouseX < imageRight && mouseY > imageBottom) {
        $('.product-hero-image.middle').toggle();
        console.log('middle');
      } else if (mouseX > imageRight && mouseY > imageBottom) {
        $('.product-hero-image.right').toggle();
        console.log('right');
      } else if (mouseX > imageRight && mouseY > imageTop && mouseY < imageBottom) {
        $('.product-hero-image.right').toggle();
        console.log('bottom right');
      } else if (mouseX > imageRight && mouseY < imageTop) {
        $('.product-hero-image.right').toggle();
        console.log('top right');
      } else {
        $('.product-hero-image.middle').toggle();
        console.log('middle');
      }
    }

    $('.product-hero-image').css('z-index', '0');

https://codepen.io/H0BB5/pen/rwqwPP

非常感谢任何帮助! :)

Answer 1

您在代码中做了太多逻辑决策。

你必须让事情变得更容易:D。我对你的代码做了一个分支，我简化了它并且它有效。检查this出来。

$(".product-hero").mousemove(getMousePosition);

function getMousePosition(event) {
  let elementVisible = $('.product-hero-image:visible');
  let imageTop = elementVisible.offset().top;
  let imageLeft = elementVisible.offset().left;
  let imageBottom = imageTop + elementVisible.height();
  let imageRight = imageLeft + elementVisible.width();

  var mouseX = event.pageX;
  var mouseY = event.pageY;

  if (mouseY < imageTop || mouseY > imageBottom) {
    return;
  }
  console.log(mouseY);
  elementVisible.hide();

  if (mouseX > imageLeft && mouseX < imageRight){
    $('.product-hero-image.middle').show();
  }
  else if (mouseX < imageLeft) {
    $('.product-hero-image.left').show();
  }
  else {
    $('.product-hero-image.right').show();
  }
}

$('.product-hero-image').css('z-index', '0');