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

あなたのコードには論理的な決定が多すぎます。

あなたは物事をより簡単にする必要があります。私はあなたのコードをフォークし、単純化して動作させます。 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');