时间戳

首页 > 解决方案 > 无法修改 HTMLElement 样式

javascript - 无法修改 HTMLElement 样式

问题描述

我在使用 html 和脚本的事件侦听器方面遇到问题。

我正在尝试通过向我的图像添加事件侦听器来实现鼠标悬停事件的缩放。我希望用户能够通过将指针传递过来来放大图像。我在 yt 上找到了一个 tuto 并试图复制它，但它不起作用。

这是一个小提琴：

https://jsfiddle.net/emk16y7u/5/

一切正常，除了在分配似乎不起作用的最后一行：

magnifying_area.addEventListener("mousemove", function (event) {

    clientX = event.clientX - magnifying_area.offsetLeft
    clientY = event.clientY - magnifying_area.offsetTop

    mWidth = magnifying_area.offsetWidth
    mHeight = magnifying_area.offsetHeight

    clientX = clientX / mWidth * 100
    clientY = clientY / mHeight * 100

    magnifying_img.style.transform = 'translate(-' + clientX + '%, -' + clientY + '%) scale (2)'
});

我究竟做错了什么 ？

标签： javascripthtmlzoomingmouseover

解决方案

我认为括号之间的空间是不允许的。你也错过了一些；在你的代码上。试试这个固定代码：

magnifying_area.addEventListener("mousemove", function (event) {
    clientX = event.clientX - magnifying_area.offsetLeft;
    clientY = event.clientY - magnifying_area.offsetTop;
    mWidth = magnifying_area.offsetWidth;
    mHeight = magnifying_area.offsetHeight;
    clientX = clientX / mWidth * 100;
    clientY = clientY / mHeight * 100;
    magnifying_img.style.transform = 'translate(-' + clientX + '%, -' + clientY + '%) scale(2)';
});

推荐阅读