Question

我想在我的网站上制作一个简单的垂直滑块。使用这个简单的代码

$('.down').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '-=410px'}, 1000);
});

$('.up').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '+=410px'}, 1000);
});

我可以上下移动我的容器，上面和下面都可以正常工作。但我遇到的一个问题是，你可以按下向上或向下按钮，这完全弄乱了div的位置。那么解决这个问题的好方法是什么？

Answer 1

可能最好不要依赖相对值，而是计算新的静态值以分配给.animate()。

此外，对于此类应用程序，我发现使用CSS position和top而不是依赖margin会更简单。一些（较旧的）浏览器似乎厌倦了用一千个地狱之火燃烧的负边缘。

// example
var container = $('#container_slider_youtube'),
    parent = container.parent(),
    step = 410
    ;
$('.down').click(function () {

    var currentTop = container.css('top'),
        newTop = Math.max(0, currentTop - step)
        ;

    container.animate({ marginTop : newTop }, 1000);

});

您可以针对.up点击进行调整。确保考虑容器父级的高度（最有可能使用.height()）。

如果你要去CSS position路线，请确保容器父至少 position:relative，并且容器 at至少同样如此。我个人将容器设置为position:absolute。

计算div的总高度

1 个答案: