我的脚本有一个小问题。
我想根据屏幕的宽度更改主体背景颜色。我的问题是我不知道我必须进行更改才能使其在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;
});
这样,您将能够避免在每次调整大小时调用函数。
希望能帮助到你!