Question

function jsiBoxAdjustTop()
{
    var top
    if ( jsiBox.preloadImg.height <= 699){
        top = 216;

    }
    else{
        top = 17;
    }
    jsiBox.boxNode.style.top = (top) + 'px';

}

我正在使用该功能调整div的顶部位置，具体取决于其高度的图像。这是一个灯箱类型的脚本，所以每次我点击下一个按钮，都会出现一个更高或更小的新图像。它工作正常，当图像更高时它会调整它的位置，但我的问题是它只是跳到那个位置。我是javascript的新手，所以任何人都可以帮助我制作这个好像它正在旅行/动画到它的位置？我尝试使用setTimeOut，但我认为我做错了。我真的很想知道我做错了什么。

如果有帮助，这是完整的脚本。 Link

Answer 1

您可以使用jQuery或YUI进行动画处理，例如

jQuery(jsiBox.boxNode).animate({'top': top}, 3000);

或者你可以只为这种情况用setTimeout编写一些简单的代码;

以下代码假设begin top为0。

var boxStyle = jsiBox.boxNode.style;

function animateTop(to) {
    boxStyle.top = parseInt(boxStyle.top, 10) + 1 + 'px';
    if (parseInt(boxStyle.top, 10) != to) {
        setTimeout(function() {
            animate(to);
        }, 50);
    }
}

animateTop(top);

使用javascript根据div的高度调整顶部位置

1 个答案: