本文旨在解决在css缩放和过渡动画过程中，如何获取动画完成后图像上的鼠标位置。通过引入一个不可见的 `div` 覆盖在图像之上，并将其缩放比例与图像同步，我们可以在动画进行时，通过点击该 `div` 来获取缩放完成后的目标鼠标位置，从而避免了 `event.offsetx` 在动画过程中的动态变化问题。
在进行图像的程序化平移和缩放时，为了提升用户体验，通常会添加CSS过渡效果。然而，当需要在动画过程中获取鼠标在图像上的位置时，event.offsetX 和 event.offsetY 属性会返回动画当前帧的坐标，而不是动画完成后的最终坐标。本文将介绍一种替代方案，通过添加额外的HTML和CSS，实现在动画进行时获取目标鼠标位置。
解决方案：使用覆盖层 div
该方案的核心思想是，在图像上方覆盖一个不可见的 div 元素，并将该 div 的缩放比例与图像同步，但不对 div 应用过渡效果。用户实际点击的是这个 div，而不是图像本身。由于 div 的缩放是瞬间完成的，因此 event.offsetX 和 event.offsetY 会直接返回缩放后的目标位置。
HTML 结构
@@##@@
wrapper: 作为定位上下文，用于绝对定位 target。target: 不可见的 div，覆盖在图像上方，负责接收点击事件。img: 实际显示的图像。
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 缩放和过渡动画过程中获取目标鼠标位置的问题。这种方法简单易懂，易于实现，并且能够有效地提高用户体验。希望本文能帮助您更好地处理类似的问题。
以上就是计算CSS缩放和过渡后的鼠标位置：event.offsetX 的替代方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528836.html
微信扫一扫 
支付宝扫一扫 
