本文旨在解决在css缩放和过渡动画过程中，如何获取动画完成后图像上的鼠标位置。通过引入一个不可见的 `div` 覆盖在图像之上，并将其缩放比例与图像同步，我们可以在动画进行时，通过点击该 `div` 来获取缩放完成后的目标鼠标位置，从而避免了 `event.offsetx` 在动画过程中的动态变化问题。
在进行图像的程序化平移和缩放时，为了提升用户体验，通常会添加CSS过渡效果。然而，当需要在动画过程中获取鼠标在图像上的位置时，event.offsetX 和 event.offsetY 属性会返回动画当前帧的坐标，而不是动画完成后的最终坐标。本文将介绍一种替代方案，通过添加额外的HTML和CSS，实现在动画进行时获取目标鼠标位置。
解决方案：使用覆盖层 div
该方案的核心思想是，在图像上方覆盖一个不可见的 div 元素，并将该 div 的缩放比例与图像同步，但不对 div 应用过渡效果。用户实际点击的是这个 div，而不是图像本身。由于 div 的缩放是瞬间完成的，因此 event.offsetX 和 event.offsetY 会直接返回缩放后的目标位置。
HTML 结构
<button onclick="onButton()">Zoom</button> <br> <div id="wrapper"> <div id="target" onclick="onImage(event)"></div> <img id="img" src="https://picsum.photos/id/237/200"> </div>
CSS 样式
立即学习“前端免费学习笔记（深入）”；
#wrapper {
display: inline-block;
position:relative;
font-size:0; /* 消除inline-block元素间的间隙 */
}
#target{
position:absolute;
width:100%;
height:100%;
}
#img {
transition: 5s ease;
z-index:2;
pointer-events:none; /* 阻止图像接收点击事件 */
}- wrapper 的 position: relative 属性使其成为 target 的定位上下文。
- target 的 position: absolute 属性使其能够完全覆盖 wrapper。
- img 的 pointer-events: none 属性阻止图像接收点击事件，确保点击事件传递到 target。 z-index: 2 使图像位于 target 之上。
JavaScript 代码
function onButton() {
const img = document.querySelector("#img");
img.style.scale = 5.0;
const target = document.querySelector("#target");
target.style.scale = 5.0;// 确保 target 的样式与 img 的样式匹配
}
function onImage(event) {
console.log(event.offsetX, event.offsetY);
}- onButton 函数同时设置图像和 target 的缩放比例。
- onImage 函数处理 target 的点击事件，并打印 event.offsetX 和 event.offsetY。
代码解释
- HTML 结构: 创建了一个 wrapper div，内部包含了 target div 和 img 标签。target div 将覆盖在 img 标签之上。
- CSS 样式: wrapper 设置为 inline-block 和 relative 定位，target 设置为 absolute 定位并占据 wrapper 的全部空间。img 设置了过渡效果，并且 pointer-events: none 阻止了点击事件。
- JavaScript 代码: onButton 函数同时改变 img 和 target 的缩放比例。onImage 函数则负责获取点击事件的坐标。
使用方法
- 将上述 HTML、CSS 和 JavaScript 代码复制到您的项目中。
- 确保图像的 URL 正确。
- 调整 CSS 样式，以适应您的项目需求。
注意事项
- 确保 target 的缩放比例始终与图像的缩放比例一致。
- 可以通过调整 CSS 样式来控制 target 的可见性，例如设置为 opacity: 0。
- 此方法适用于简单的缩放和过渡效果。对于更复杂的动画，可能需要使用更高级的技术。
总结
通过使用覆盖层 div，我们成功地解决了在 CSS 缩放和过渡动画过程中获取目标鼠标位置的问题。这种方法简单易懂，易于实现，并且能够有效地提高用户体验。希望本文能帮助您更好地处理类似的问题。
