1

レスポンシブな視差背景画像とその位置のために、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
    });

});
4

2 に答える 2

2

ステートメントについての最初のことif: あなたは書くことができます:

if( width < someval ){
    .
    .
} else if( width > someotherval && width < sometotalotherval ){

} else {

}

&&or||演算子を使用します。

「エコー バックして 100 回保存」の意味がわかりません。

ご挨拶...

編集:

このコメントフラグメントの順序:

私が知る必要があるのは、ブラウザー ウィンドウで div がさまざまな幅で開始および終了する場所です (前にある div だけでなく、後ろにある bg div.

以下をご覧ください。

<element>.getBoundingClientRect()

方法。任意の html 要素の上、左、右、下の 4 つの値を返し、それらの原点は画面の左上隅です。したがって、要素が上部にあり、ドキュメントが下にスクロールされているために要素が表示されない場合、上部の値が負であり、下部の値も負の場合、要素が完全に非表示であることがわかります。このメソッドを使用すると、div の開始と終了を簡単に取得できます。

于 2012-11-22T07:15:38.243 に答える
0

最初に最小値を使用してステートメントの順序を逆にすると、同じ重複の問題は発生しません。条件の 1 つだけが true になります

if( current_width < 320 ){

}else if( current_width < 480){
  /* true when greater or equal to 320 and less than 480 */
}

/* etc*/
于 2012-11-22T07:14:28.770 に答える