英文:
Javascript event.offset alternative for final value during CSS scale & transition
问题
我有一个HTML图像，我想要通过编程方式进行平移和缩放。为了提高体验，我添加了CSS过渡以实现平滑效果。
当我点击图像时，我需要确定图像内的鼠标位置。目前，event.offsetX在动画的当前帧中给我提供了鼠标在图像内的位置。
我想要知道鼠标位置，就好像动画已经完成（尽管尚未完成）。
以下是另一种解释问题的方式。我在下面创建了一个示例，在我们单击按钮后，图像会放大。缩放需要5秒钟。在缩放过程中，如果我保持鼠标固定并不断点击，偏移值会随着图像在屏幕上移动而变化，然后在5秒后稳定下来并返回相同的偏移值。如果可能的话，我想要知道动画完成之前的最终偏移值。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-html -->
<button onclick="onButton()">缩放</button>
<br>
<img
id='img'
onclick="onImage(event)"
src="https://picsum.photos/id/237/200"
style="transition: 5s ease"
>
<script>
function onButton() {
const img = document.querySelector('#img')
img.style.scale = 5.0
}
function onImage(event) {
console.log(event.offsetX, event.offsetY)
}
</script>
<!-- 结束代码片段 -->
英文:
I have an HTML image that I want to pan & zoom programatically. In order to improve the experience, I added a CSS transition for smoothness.
When I click on the image, I need to determine the mouse position within the image. Currently, event.offsetX gives me the mouse position within the image at the current frame of the animation.
I would like to know the mouse position as if the animation finished already (even though it hadn't).
Here is another way of explaining the problem. I created below an example where an image zooms in after we click on the button. The zoom takes 5 seconds. During the zoom, if I keep my mouse fixed and keep clicking, the offset value changes as the image moves on the screen and then it stabilizes after 5 seconds and returns the same offset value. I would like to know that final offset value before the animation finishes if possible.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<button onclick="onButton()">Zoom</button>
<br>
<img
id='img'
onclick="onImage(event)"
src="https://picsum.photos/id/237/200"
style="transition: 5s ease"
>
<script>
function onButton() {
const img = document.querySelector('#img')
img.style.scale = 5.0
}
function onImage(event) {
console.log(event.offsetX, event.offsetY)
}
</script>
<!-- end snippet -->
答案1
得分: 1
如果你不介意添加一些额外的HTML和CSS：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
function onButton() {
const img = document.querySelector("#img");
img.style.scale = 5.0;
const target = document.querySelector("#target");
target.style.scale = 5.0; // 确保目标的样式与图像的样式匹配
}
function onImage(event) {
console.log(event.offsetX, event.offsetY);
}
<!-- 语言: lang-css -->
#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;
}
<!-- 语言: lang-html -->
<button onclick="onButton()">放大</button>
<br>
<div id="wrapper">
<div id="target" onclick="onImage(event)"></div>
<img id="img" src="https://picsum.photos/id/237/200">
</div>
<!-- 结束代码片段 -->
这段代码通过在图像后面放置一个不可见的div来实现放大效果，不使用过渡，并将点击事件传递到该div而不是图像本身。
英文:
If you don't mind adding some additional HTML and CSS:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
}
<!-- language: lang-css -->
#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;
}
<!-- language: lang-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>
<!-- end snippet -->
This work by zooming an invisible div behind the image without transition, and transfer the click event to that div instead of the image itself
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论