이 사이트에 표시된 것과 같은 효과를 얻으려고합니다 : https://ca.warbyparker.com/eyeglasses/women/louise/elderflower-crystal
마우스 위치 (또는 모바일의 경우 엄지 손가락)를 이동하면 마우스의 수평 위치에 따라 표시된 이미지가 변경됩니다.
나는 그것이 반응하도록 노력해 왔고 작동하는 jquery 또는 바닐라 자바 스크립트 솔루션을 얻음에도 불구하고 약간의 문제가 있습니다.
내가 지금까지 가지고있는 것 :
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>
자바 스크립트 :
$(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
어떤 도움이라도 대단히 감사합니다! :)
코드에서 너무 많은 논리 결정을 내 렸습니다.
당신은 일을 더 쉽게해야합니다 : D. 나는 당신의 코드를 포크하고 그것을 단순화하고 작동합니다. 이것을 확인하십시오 .
$(".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');
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다