Question

有没有办法显示/捕获div顶部值，因为它的动画类似于Chrome开发工具元素标签？我尝试过getComputedStyle和getPropertyValue但不起作用。这是我到目前为止所尝试的

var top_sq = document.getElementById("square"),
style_sq_top = getComputedStyle(top_sq),
sq_top = style_sq_top.getPropertyValue("top"),
act_sq_top = sq_top.substring(0, 3);

var tv = document.getElementById("top_value").text = sq_top;

$("#btn1").click(function(){
$("#square").animate({top:"300px"}, 3000);
 tv.toString;
});

http://jsfiddle.net/QYVQT/

Answer 1

您提供的代码存在的问题是，tv动态不会动态更改sq_top。请记住，tv只是一个数字。当您将sq_top设置为tv时，您将其设置为等于一个数字。因此，当progress移动时，.animate()的值不会发生变化。

相反，每次重新计算。您可以使用$.progress()函数的var square = document.getElementById("square"), squareTop = null, squareTopString = null, tvDiv = document.getElementById('top_value'); $("#btn1").click(function(){ $("#square").animate( {top:"300px"}, { duration: 3000, progress: function(){ /* get the top of the square */ squareTop = square.style.top; /* format it correctly */ dotLoc = squareTop.indexOf('.'); if(dotLoc == -1){ squareTopString = squareTop; } else{ squareTopString = squareTop.substring(0, dotLoc) + 'px'; } /* display the current top position, e.g. "200px" */ tvDiv.innerHTML = squareTopString; }, easing: "swing" } ); });属性来执行此操作。见这里：http://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-to-create-custom-animations.htm。

使用{{1}}函数的代码：

{{1}}

小提琴：http://jsfiddle.net/KLhzp/3/

Answer 2

以下是使用jQuery animate()'s step()回调的示例。

var top_sq = document.getElementById("square"),
    style_sq_top = getComputedStyle(top_sq),
    sq_top = style_sq_top.getPropertyValue("top"),
    act_sq_top = sq_top.substring(0, 3);

var $tv = $("#top_value")
$tv.text(act_sq_top);

$("#btn1").click(function () {
    $("#square").animate({
        top: "300px"
    }, {
        duration: 3000,
        step: function (now, fx) {
            pos = Math.round(now);
            $tv.text(pos);
        }
    });
});

这是一个小提琴http://jsfiddle.net/QYVQT/2/

动态捕获div位置

2 个答案: