gpt4 book ai didi

javascript - 用javascript鼠标位置改变图像?

转载 作者:行者123 更新时间:2023-11-28 17:53:19 25 4
gpt4 key购买 nike

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

当您移动鼠标位置(或移动设备的拇指)时,显示的图像将根据鼠标的水平位置而变化。

我一直在尝试让它在 React 中工作,但遇到了一些麻烦,即使获得了一个有效的 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

非常感谢任何帮助! :)

最佳答案

您在代码中做了太多逻辑决策。

你必须让事情变得更容易: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 - 用javascript鼠标位置改变图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44991795/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com