2

私は初心者であり、私のコードはおそらく非常に面倒で一貫性がないと言って前置きしますが、それらのエラーが検出されることを期待してとにかく投稿します.

これに対する回答と解決策を数日間検索しました。また、まったく同じ質問をしている誰かのトピックをここで見つけました：http: //goo.gl/BwLzp（あいまいと見なされる）なので、徹底的に説明します私がどのようになるかを知っているように。

私がこれまでに持っているのは、いくつかのチュートリアルとここからの抜粋の組み合わせです。

コンセプト: (大量の画像がプリロードされ、背景画像として設定されます。理論的には、スクロールされる整数 (scrollTop) ごとに、それに応じて背景画像が変化します。)

すべての画像には基本的に、imgname1.jpg、imgname2.jpg、imgname3.jpg などの名前が付けられます。したがって、「imgname」は scrollTop 番号とペアになっています。

そして、スクロールのみ（プリロードではない）に関して私が持っているものは次のとおりです。

$(function getPos() {
    var Pos = $(window).scrollTop();  // "Pos = scrollTop and is added onto imgname
return Pos;
}); 

$(function() {

$(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving 

    var image_url = 'http://www.examplehost.com/imgname' + Pos + '.jpg'

    if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

        $("body").css('background-image', image_url);                            
    }


    else { //If the vertical position of scrollbar is at 1 display start image
        $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
    }

});

}); //function ends

それがどれほど混乱しているのかはわかりません。はい、基本をブラッシュアップします。私の頭の中では論理的ですが、完全に間違っていると確信しています。ただし、このプロジェクトでは、私の知識では、次のことを推測/疑問に思うだけに制限されています。

  • 関数が終了するとき、「}」の後にコンマが必要ですか。元： }、
  • すべてが適切に開閉されていますか。
  • これはまさに私の js ファイルの外観であり、関数が正しく呼び出されないという問題があったとしても驚かないでしょう。
  • また、 if (getPos()>1) の代わりに if (getPos()>=1) を使用したいと思います

役立つ追加情報/さらなる明確化。目標は、画像の位置が静止したままであり、スクロールの増分ごとに新しい「フレーム」が引き継がれることです。最終的には、次のように画像を中央に配置して全画面表示のままにします: http://www.powersmart.ca/

これを読んでくれてありがとう。私がルールを破った場合、またはこの質問/ジレンマが私が見つけられなかった場所でさらに詳細に解決された場合はお詫び申し上げます.

そうは言っても、考え？

4

3 に答える 3

1

これを変更してみてください：

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', image_url);                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
}

に：

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', 'url('+image_url+')');                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', 'url(http://www.examplehost.com/imgname/0.jpg)');
}
于 2012-11-10T01:36:24.900 に答える
0

「背景画像の位置を静止させる」には、必要ですobject.style.backgroundAttachment="fixed"

jqueryで行うには：

$("body").css('background-attachment', 'fixed');

これをcssに入れることをお勧めしますが

body { 
    background-attachment: fixed;
}

http://www.w3schools.com/cssref/pr_background-attachment.asp

Google はあなたの友達です ;)

編集: 1 つだけ表示されます。画像の URL は正しいですか? URL が間違っていると、バックグラウンドがまったく表示されません。

于 2012-11-10T01:32:33.113 に答える
0 
function getPos() {
    var Pos = $(window).scrollTop();
    return Pos;
}
$(function() {
      $(window).scroll(
       function() {
        var here=getPos();
        //alert(here);
        $("body").css('background-image', url('http://www.examplehost.com/imgname' + here + '.jpg')); 
      })
});

これで始めます。ただし、ピクセルごとに1つの画像が必要です...

于 2012-11-10T01:54:16.303 に答える