当图像未处于鼠标移动位置(或未处于悬停状态)时,我希望移除事件侦听器事件.我是新手,由于这个原因,我无法解决这个问题.如有任何帮助,我们将非常感激.以下是我的代码:

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>

推荐答案

这听起来像是X/Y问题

您很少需要删除事件侦听器.如果您想在我们将鼠标移出时重置变换,则此代码将起作用

const image = document.querySelector("img");
image.addEventListener("mouseleave", event => {event.target.style.transform = 'none'; });

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)`;
});
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>

Javascript相关问答推荐

在Chart.js 4.4.2中移动到不同大小的容器时,图表不会调整大小

如何在react + react路由域名中使用DeliverBrowserRouter?

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗?

扫描qr code后出错whatter—web.js

如何在Obsidian dataview中创建进度条

如何添加绘图条形图图例单击角形事件

XSLT处理器未运行

Javascript json定制

使用ThreeJ渲染的形状具有抖动/模糊的边缘

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

更新动态数据中对象或数组中的所有值字符串

映射类型定义,其中值对应于键

如何在Bootstrap中减少网格系统中单个div的宽度

是否可以在Photoshop CC中zoom 路径项?

以编程方式聚焦的链接将被聚焦,但样式不适用

Reaction-SWR-无更新组件

如何在Java脚本中对列表中的特定元素进行排序?

在Odoo中如何以编程方式在POS中添加产品

构建器模式与参数对象输入

AG-GRIDreact 显示布尔值而不是复选框