我需要在jQuery插件中为响应式视差背景图像及其位置实现一个多if if> else if语句。
我到目前为止的代码是：
if ($thirdBG.hasClass("inview")){
//call the newPos function and change the background position
$thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2550, 0)});
//$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
if (current_width < 960) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width < 768) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width < 480) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width < 320) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
}
//bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
//call the newPos function and change the second background position
}
然而，这并不是我想要的。此代码定义宽度是否小于特定大小。我希望它能说出类似
的内容if (current_width > 320 and < 480) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
我想要的基本上是：
在位置X处显示以下尺寸范围的bg3：
大于320但小于或等于480 大于480但小于或等于768 大于768但小于或等于960 大于960
不确定语法是什么。
是否有一种更有效的编写代码的方式，而不是多个if ... else if ... else语句？
最后，我想知道如何在屏幕上回显当前的垂直滚动位置，以便我可以了解图像的位置，而无需保存和重新加载页面1000次。
在此处添加完整的nbw-parallax.js插件代码：
/*
Demo: Despiration Tutorial Parallax Demo
Author: Elias Ghosn - Despiration.com
Author URL: http://www.despiration.com/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Despiration.com simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.despiration.com/.
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function() { //when the document is ready...
var current_width = $(window).width();
//do something with the width value here!
//jQuery('nav').removeClass("is-sticky");
if(current_width < 960){
jQuery('nav').addClass("is-sticky");
}
$(".menusel").click(function () { $(".mobico").fadeIn('slow');});
$(".mobico a").click(function () { $(".mobico").fadeOut('slow');});
//save selectors as variables to increase performance
var $window = $(window);
var $firstBG = $('#intro');
var bg1 = $("#intro .bg1");
var $secondBG = $('#separator1');
var bg2 = $("#separator1 .bg2");
var $thirdBG = $('#separator2');
var bg3 = $("#separator2 .bg3");
var $fourthBG = $('#separator3');
var bg4 = $("#separator3 .bg4");
var windowHeight = $window.height(); //get the height of the window
//apply the class "inview" to a section that is in the viewport
$('#intro, #separator1, #separator2, #separator3').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
//function that places the navigation in the center of the window
function RepositionNav(){
var windowHeight = $window.height(); //get the height of the window
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
$('#nav').css({"top": newtop}); //set the new top position of the navigation list
}
//function that is called for every pixel the user scrolls. Determines the position of the background
/*arguments:
x = horizontal position of background
windowHeight = height of the viewport
pos = position of the scrollbar
adjuster = adjust the position of the background
inertia = how fast the background moves in relation to scrolling
*/
function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) + "px";
}
//function to be called whenever the window is scrolled or resized
function Move(){
var pos = $window.scrollTop(); //position of the scrollbar
//if the first section is in view...
if($firstBG.hasClass("inview")){
//call the newPos function and change the background position
$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 500, 0)});
//call the newPos function and change the second background position
bg1.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.2)});
}
//if the second section is in view...
if($secondBG.hasClass("inview")){
//call the newPos function and change the background position
$secondBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 1550, 0)});
//$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
bg2.css({'backgroundPosition': newPos(90, windowHeight, pos, 2610, 0.2)});
//call the newPos function and change the second background position
}
if ($thirdBG.hasClass("inview")){
//call the newPos function and change the background position
$thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2550, 0)});
//$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
if (current_width < 320) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width = 320 && < 480) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width = 480 && < 768) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else if (current_width = 768 && < 960) {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.2)});
}
else {
bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
}
//bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, 4910, 0.2)});
//call the newPos function and change the second background position
}
if ($fourthBG.hasClass("inview")){
//call the newPos function and change the background position
$fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 5850, 0)});
//$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)});
//call the newPos function and change the second background position
if (current_width < 320) {
bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
}
else if (current_width = 320 && < 480) {
bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
}
else if (current_width = 480 && < 768) {
bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
}
else if (current_width = 768 && < 960) {
bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 8110, 0.2)});
}
else {
bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 6110, 0.20)});
}
//bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, 6110, 0.20)});
}
$('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
}
RepositionNav(); //Reposition the Navigation to center it in the window when the script loads
$window.resize(function(){ //if the user resizes the window...
var current_width = $(window).width();
//do something with the width value here!
// jQuery('nav').removeClass("is-sticky");
if(current_width < 960){
jQuery('nav').addClass("is-sticky");
}
Move(); //move the background images in relation to the movement of the scrollbar
RepositionNav(); //reposition the navigation list so it remains vertically central
});
$window.bind('scroll', function(){ //when the user is scrolling...
Move(); //move the background images in relation to the movement of the scrollbar
});
});
答案 0 :(得分：2)
关于if陈述的第一件事：你可以写：
if( width < someval ){
.
.
} else if( width > someotherval && width < sometotalotherval ){
} else {
}
所以使用&&或||运算符。
我不知道你的意思»回声并保存100次«。
...问候
修改
为了这个评论片段：
我需要知道的是div在浏览器窗口中以不同宽度开始和结束的位置（而不仅仅是前面的div，而是后面的bg div。
看看：
<element>.getBoundingClientRect()
方法。它返回四个值：任意html元素的顶部，左侧，右侧和底部，它们的原点是屏幕的左上角。因此，如果元素不可见，因为它位于顶部而文档向下滚动，则顶部值为负，如果底部值也为负，则您知道该元素完全不可见。使用此方法，您可以轻松获得div的开头和结尾。
答案 1 :(得分：0)
如果您先使用最低值反转语句的顺序，则不会出现相同的重叠问题。只有一个条件是真的
if( current_width < 320 ){
}else if( current_width < 480){
/* true when greater or equal to 320 and less than 480 */
}
/* etc*/