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

Question

我想实现像什么是此网站上显示的效果：https://ca.warbyparker.com/eyeglasses/women/louise/elderflower-crystal

当你移动（移动或拇指）鼠标位置显示会根据鼠标的水平位置改变形象。

我一直试图让它在反应中工作，我有一些麻烦，即使获得工作的jquery或香草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');