0

ここでは少し長いショットですが、誰かがこれで私を助けてくれることを願っています.

画像をブラウザーのサイズ (モバイル デバイスも) に合わせてスケーリングしようとしていますが、このビットは達成できますが、下にスクロールすると、次の画像にプルダウンされるのではないかと思っていました。それが理にかなっている場合、どちらもブラウザのサイズに合わせてスケーリングされますか? （お詫び）。

私は現在、次のように backstretch プラグインを使用してスケーリングされた画像を実現しています。

$(document).ready(function(){
$("#test").backstretch("../images/background-v2.jpg");
});

画像の周りに白い境界線を残すために、ブラウザーのサイズの約 95% にしたいので、それらを div 内に入れ子にします。
しかし、サイトをワードプレスに取り込んでコンテンツを管理できるサイトにすることを計画しているため、イメージタグを jQuery 経由で挿入したくありません。

理想的には次のようになります。

<div id="project-images">
<img src="../images/image-01.jpg" width="" height="" />
<img src="../images/image-02.jpg" width="" height="" />
<img src="../images/image-03.jpg" width="" height="" />
<img src="../images/image-04.jpg" width="" height="" />
</div>

image-01 がブラウザーのサイズに合わせてスケーリングされている場合、スクロールすると、image-02 に引き下げられ、これもブラウザーのサイズにスケーリングされます。
少し長いショットですが、これがどのように達成されるかについてはまったくわかりません。提案があれば大歓迎です!

4

1 に答える 1

0

それは一方向かもしれません、多くのはずです

ウィンドウの高さをすべての画像の高さに設定します。

ただし、表示する画像を設定します：なし

次に、そのプラグインを作成します

  • 1つの画像を表示/他の画像を非表示
  • ウィンドウをその画像までスクロールします（$（window）.scrollTop（...））
  • 上に戻す：0すべての画像

それから

プラグインを使用して最初の画像を表示する

それから

var lastScrollTop = 0;

//how much must the user scroll before next/prev image is shown :
var minscrolling = 50;

$(window).on({
       "scrollstart" : function(){
             lastScrollTop = $(this).scrollTop();

       },
       "scroll" : function (e) {
             var currentscrollpos= $(this).scrollTop();
             //reposition visible image so it seems it doesn't scroll
             // top : lastScrollTop -currentscrollpos
             // 
            if (lastScrollTop - currentscrollpos > minscrolling)  

                 // use  plugin to show next img
                 // set lastscrolltop to  currentscrollpos

            else if (lastScrollTop -  currentscrollpos < -minscrolling) 
                  //use plugin to show previous img
                   // set lastscrolltop to  currentscrollpos
       }

 });
于 2013-01-22T21:52:29.253 に答える