本文旨在解决在 JavaScript 中，当 CSS 缩放动画正在进行时，如何获取元素缩放完成后的 `offsetX` 和 `offsetY` 值的问题。通过引入一个辅助的、无过渡的 `div` 元素，并将其放置在目标图像的下方，可以模拟缩放后的最终状态，从而准确获取鼠标在缩放完成后的位置信息。这种方法无需等待动画结束，即可立即获得目标值，提升用户体验。
在进行 CSS 缩放和过渡动画时，直接使用 event.offsetX 和 event.offsetY 获取的鼠标位置是动画过程中的瞬时值，而不是动画结束后的最终值。这在需要基于最终缩放比例进行计算或操作的场景下会带来问题。以下提供一种解决方案，通过添加一个辅助元素来解决这个问题。
解决方案：使用辅助 Div 模拟最终状态
该方案的核心思想是在目标图像下方创建一个不可见的 div 元素，该元素在缩放时没有过渡效果，立即达到最终的缩放比例。然后，将点击事件绑定到这个 div 元素上，通过它来获取鼠标位置信息。
1. HTML 结构调整：
立即学习“Java免费学习笔记（深入）”；
将目标图像 img 和辅助 div 放入一个容器 div#wrapper 中。辅助 div#target 覆盖整个图像区域，并负责接收点击事件。
@@##@@
2. CSS 样式设置：
#wrapper: 使用 inline-block 和 position:relative，使其可以包裹内容并作为绝对定位元素的参考。font-size:0 避免了inline-block元素之间的空白问题。#target: 使用 position:absolute，使其完全覆盖图像。width:100%; height:100%; 保证其大小与图像一致。#img: transition: 5s ease 设置缩放动画。z-index:2 保证图像显示在辅助 div 的上方。pointer-events:none 禁用图像的鼠标事件，确保点击事件传递到辅助 div。
#wrapper { display: inline-block; position:relative; font-size:0;}#target{ position:absolute; width:100%; height:100%;}#img { transition: 5s ease; z-index:2; pointer-events:none;}
3. JavaScript 代码：
onButton(): 除了缩放图像 img，还需要同步缩放辅助 div#target。确保 target 的缩放比例与 img 相同。onImage(): 点击事件绑定在 target 上，所以 event.offsetX 和 event.offsetY 获取的是缩放完成后的位置信息。
function onButton() { const img = document.querySelector("#img"); img.style.scale = 5.0; const target = document.querySelector("#target"); target.style.scale = 5.0;// make sure target's style matches img's style}function onImage(event) { console.log(event.offsetX, event.offsetY);}
代码示例（完整）：
#wrapper { display: inline-block; position:relative; font-size:0;}#target{ position:absolute; width:100%; height:100%;}#img { transition: 5s ease; z-index:2; pointer-events:none;}
@@##@@function onButton() { const img = document.querySelector("#img"); img.style.scale = 5.0; const target = document.querySelector("#target"); target.style.scale = 5.0;// make sure target's style matches img's style}function onImage(event) { console.log(event.offsetX, event.offsetY);}
注意事项：
确保辅助 div 的缩放比例与图像的最终缩放比例一致。pointer-events:none 属性是关键，它允许点击事件穿透图像，传递到辅助 div。如果需要更复杂的交互，可以考虑使用事件委托，将事件监听器绑定到 wrapper 上。
总结
通过引入辅助 div 元素，可以有效地解决 CSS 缩放动画期间 event.offsetX 和 event.offsetY 值不准确的问题。这种方法简单易懂，能够快速获取缩放完成后的鼠标位置信息，为后续的计算和操作提供准确的数据支持，提升用户体验。这种技巧在需要处理动画过程中鼠标事件的场景中非常有用。
以上就是JavaScript CSS 缩放动画期间获取最终 offset 值的替代方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528812.html
微信扫一扫 
支付宝扫一扫 
