0

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

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

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

我可以上下滑动装有所有东西的容器，效果很好。但是我遇到的一个问题是，您可以一直按向上或向下按钮，这会完全弄乱 div 的位置。那么解决这个问题的好方法是什么？

4

1 回答 1

1

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

此外，对于这样的应用程序，我发现使用 CSSposition而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()最有可能使用）。

如果你打算走 CSSposition路线，请确保容器父级至少 position:relative是，并且容器至少也是相同的。我个人将容器设置为position:absolute.

于 2013-02-21T11:37:36.727 回答