如何跟踪使用 Zepto 制作动画的图像的位置？

发布于 2024-12-27 12:56:16 字数 278 浏览 0 评论 0原文

我目前正在尝试使用 Zepto .anim() 方法跟踪页面上动画图像的 x 和 y 位置。问题是，我用来尝试查找这些的任何方法都只返回它最初加载的位置，而不是它现在所在的位置。我可以通过在需要时计算它的位置来解决这个问题，但这种方法有点不可靠。有谁知道一个简单的方法来做到这一点？

编辑：根据要求：

$('#circle').anim({translateX: newX + 'px', translateY: newY + 'px'}, speed, 'linear')

原文

I am currently trying to track the x and y locations of an image on my page animated with the Zepto .anim() method. The problem is that any methods I use to try to find these only return the location of where it was initially loaded, not the location that it is at now. I can work around that by calculating where it is whenever I need that, but that method is a bit unreliable. Does anyone know of a simple way to do this?

Edit: As requested:

$('#circle').anim({translateX: newX + 'px', translateY: newY + 'px'}, speed, 'linear')

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不交电费瞎发啥光 2025-01-03 12:56:16

这会有点复杂，因为您使用的是 CSS3 转换，并且实际上没有公开任何 Zepto API 来检索此信息。

首先您必须了解信息存储在哪里。假设您使用的是 Android、iPhone、Safari 或 Chrome，这是 webkitTransform 属性。

如果您访问 $('#circle').css('webkitTransform')，您将看到 translateX(somevalue) translateY(somevalue)，其中的值是您传递的值通过 JavaScript 中。

不幸的是，这是最终值而不是中间值。对于中间值，您将需要这样的东西：

getComputedStyle($('#circle')[0]).webkitTransform
// == "matrix(1, 0, 0, 1, 87.66703796386719, 82.89203643798828)"

这些值存储在转换矩阵中。根据传递的内容，它可以是 matrix 或 matrix3d。查看我对另一个关于如何从中提取 X 和 Y 值的问题的回答这个字符串。

显然，这是一项艰巨的工作，您需要为移动 Firefox 等添加更多逻辑。您可能需要考虑您正在尝试的是什么，并看看是否有替代方法。

This is going to be a little complicated because you are using CSS3 transforms and there is not really any Zepto API exposed for retrieving this information.

First you have to understand where the information is stored. Assuming you're on Android, iPhone, Safari, or Chrome, this is the webkitTransform property.

If you access $('#circle').css('webkitTransform'), you will see translateX(somevalue) translateY(somevalue) where the values are what you passed through in the JavaScript.

Unfortunately, this is the final value and not the intermediate value. For the intermediate value, you will need something like this:

getComputedStyle($('#circle')[0]).webkitTransform
// == "matrix(1, 0, 0, 1, 87.66703796386719, 82.89203643798828)"

These values are stored in a transformation matrix. It can be either a matrix or a matrix3d based on what was passed. See my answer to another SO question on how to extract X and Y values from this string.

Obviously, this is a lot of work and you will need to add more logic for mobile Firefox and such. You may want to consider what it is you're attempting and see if there is an alternative approach.

回复收藏 0 原文

神妖 2025-01-03 12:56:16

代码来自：检索 HTML 元素的位置 (X,Y)< /a>

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

可以使用它来准确获取元素在页面上的当前位置。

Code from : Retrieve the position (X,Y) of an HTML element

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

You can use it to accurately get the current position of the element on the page.

回复收藏 0 原文

~没有更多了~