我需要在 jQuery 插件中为响应式视差背景图像及其位置实现多 if...else if...else 语句。
我目前的代码是:
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
});
});
最佳答案
关于 if 的第一件事语句:你可以这样写:
if( width < someval ){
.
.
} else if( width > someotherval && width < sometotalotherval ){
} else {
}
所以使用 &&或 ||运营商。
我不知道您所说的 »回显并保存 100 次« 是什么意思。
问候...
编辑:
为了这个评论片段:
What I need to know is where the div starts and ends in the browser window at different widths (and not just the div that is in front, but the bg div that is behind.
看看:
<element>.getBoundingClientRect()
方法。它返回四个值:任意 html 元素的顶部、左侧、右侧和底部，它们的原点是屏幕的左上角。因此，如果某个元素不可见，因为它位于顶部并且文档向下滚动，则顶部值为负，如果底部值也为负，则您知道该元素是完全不可见的。使用此方法，您可以轻松获取 div 的开始和结束。
关于javascript - 根据当前宽度使用 jQuery 定义背景元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13506969/