Question

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

编辑：根据要求：

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

Answer 1

这会有点复杂，因为您正在使用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。 See my answer to another SO question on how to extract X and Y values from this string.

显然，这是一项很多工作，您需要为移动Firefox等添加更多逻辑。你可能想要考虑一下你正在尝试什么，看看是否有另一种方法。

Answer 2

代码来自：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;

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

如何跟踪Zepto动画图像的位置？

2 个答案: