Question

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

当您移动鼠标位置（或移动拇指）时，显示的图像将根据鼠标的水平位置而改变。

我一直在努力让它在反应中工作，我遇到了一些麻烦，即使获得了一个工作的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');

用javascript鼠标位置更改图像？

1 个答案: