用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');