我的脚本有一个小问题。

我想根据屏幕的宽度更改主体背景颜色。我的问题是我不知道我必须进行更改才能使其在960以下到1130之间工作。

例如:假设我调整浏览器大小。

1300px -> 1150px = ok
1150px -> 1300px = ok
1150px -> 925px = ok
925px -> 1150px = **not ok**

jQuery script:

$(window).resize(function() {
    viewportWidth = $(this).width();
    if ( viewportWidth >= 1200 && w < 1200){

        $('body').css('background', 'red');

        w = viewportWidth;

        console.log(w);

    }else if (viewportWidth < 1200 && w >= 1200) {

        $('body').css('background', 'green');

        w = viewportWidth;

        console.log(w);

    }else if (viewportWidth < 960 && w >= 960) {

        $('body').css('background', 'blue');

        w = viewportWidth;

        console.log(w);

    };
}).resize();


JsFiddle:

JsFiddle

最佳答案

您的问题是:在960以下时,您正在将窗口的大小传递给变量w。当您调整大小超过960时,您正在检查(viewportWidth < 1200 && w >= 1200),当然还有w是否小于1200,因为分辨率较低。

您为什么仍要使用该变量?
我建议只是将其删除并以这种方式进行。

$(window).resize(function() {
    viewportWidth = $(this).width();

    if ( viewportWidth < 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200) {
        $('body').css('background', 'green');
    } else {
        $('body').css('background', 'red');
    };
});


编辑:

当您使用此变量控制功能时,仍然可以使用它,只需更改中间值即可,例如:

var w = 0;
$(window).resize(function() {
    var viewportWidth = $(this).width();

    if (viewportWidth < 960 && w >= 960) {
        $('body').css('background', 'blue');
    } else if (viewportWidth < 1200 && (w < 960 || w >= 1200)) {
        $('body').css('background', 'green');
    } else if (viewportWidth >= 1200 && w < 1200) {
        $('body').css('background', 'red');
    };

    w = viewportWidth;
});


这样,您将能够避免在每次调整大小时调用函数。

希望能帮助到你!

10-05 20:40
查看更多