0

我正在研究一个简单的滑块，它进展顺利，（仍在学习 jQuery）。目前，我的滑块计算窗口大小并更改我的（全屏）div 宽度，以便内容保留在屏幕中。显然，在您希望内容移动的滑块上，这就是问题所在。

我用它来获取我的窗口宽度，

var lastWidth   = $(window).width();
$(window).resize(function(){
    if($(window).width()!=lastWidth){
        //execute code.
        lastWidth = $(window).width();
    }
});

所以 lastWidth 变量存储了窗口的宽度。我像这样使用这个变量

这给出并更新了我的滑块容器中所有 div 的宽度（#pageslider）

$("#pageslider div").css({"min-width": (lastWidth)});

这将计算#pageslider 的宽度应该是多少，以便所有 div 都适合。

$("#pageslider").css({"min-width": (lastWidth * 4)});

现在我们解决了这个问题。如果访问者单击 .portfolio 类，#pageslider 会因为左边距而向左移动。给出的值是屏幕的当前宽度。这工作正常。

但是，如果访问者更改了窗口宽度，则该值不会得到更新，因为它是放在 CSS 中的。

$('nav li a.portfolio').click(function(event){
    $('#pageslider').animate({
        "margin-left":-lastWidth},"slow");
});

因此，如果窗口宽度为 1920 像素并且有人单击 .portfolio 链接，#pageslider 将向左移动 1920。但是当屏幕调整大小时，它会保持在左侧 1920 像素，尽管它应该更改为当前屏幕大小。

这是一个有问题的小jsfiddle：http: //jsfiddle.net/L29pq/

4

1 回答 1

0

演示

我所做的是添加一个变量，该变量active记录您必须向左移动多少，以lastWidth. 点击home它的0. 点击portfolio它的1，等等。

jQuery

var lastWidth = $(window).width();
var active = 0;

$(window).resize(function () {
    if ($(window).width() != lastWidth) {
        lastWidth = $(window).width();
        $("#pageslider div").css({
            "min-width": (lastWidth)
        });
        $("#pageslider").css({
            "min-width": (lastWidth * 4)
        });

        $('#pageslider').css({
            "margin-left": -lastWidth * active
        });
    }
});

$("#pageslider div").css({
    "min-width": (lastWidth)
});
$("#pageslider").css({
    "min-width": (lastWidth * 4)
});

$('nav li a.portfolio , h1 a').click(function (event) {
    event.preventDefault();
    var href = this.href;
});

$('nav li a.portfolio').click(function (event) {
    $('#pageslider').animate({
        "margin-left": -lastWidth
    }, "slow");
    active = 1;
});

$('h1 a').click(function (event) {
    $('#pageslider').animate({
        "margin-left": '0px'
    }, "slow");
    active = 0;
});
于 2013-06-21T09:55:24.783 回答