当图像未处于鼠标移动位置(或未处于悬停状态)时,我希望移除事件侦听器事件.我是新手,由于这个原因,我无法解决这个问题.如有任何帮助,我们将非常感激.以下是我的代码:
const image = document.querySelector("img");
image.addEventListener("mousemove", event => {
const { top, bottom, left, right } = event.target.getBoundingClientRect();
const middleX = (right - left) / 5;
const middleY = (bottom - top) / 5;
const clientX = event.clientX;
const clientY = event.clientY;
const offsetX = (clientX - middleX) / middleX;
const offsetY = (middleY - clientY) / middleY;
event.target.style.transform = `perspective(1000px) rotateY(${offsetX *
5}deg) rotateX(${offsetY * 5}deg) scale3d(1, 1, 1)`;
});
image.removeEventListener("mousemove", event);
div.my-img {
margin: 5rem 25%;
width: 100%;
position: relative;
}
img {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: auto;
object-fit: cover;
object-position: center center;
opacity: 1;
border-radius: 8px;
cursor: pointer;
}
<div class="my-img">
<img class="tilt" src="https://images.unsplash.com/photo-1542856391-010fb87dcfed"></div>