2

ここのアップルサイトのようにページを下にスクロールできるフルスクリーン画像を作成したいと思います。

http://www.apple.com/uk

ブラウザーのサイズを変更すると、画像は全画面表示のままですが、フッターまでスクロールできることがわかります。

これはjqueryで実行できますか、それともjavascriptが必要ですか?

私がこれまでに持っている唯一のコードは、画像をフルスクリーンにするこの css コードです。

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

ここにフィドルフィドルがありますhttp://jsfiddle.net/XXHgJ/

フッターを下にスクロールしてもメニューが表示されない場合は、上にスクロールする必要があります。

4

3 に答える 3

1

全画面要素を作成したいだけなら、jQuery でそれを行うことができます。

jQuery:

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

リビングデモ: http://jsfiddle.net/XXHgJ/7/

于 2013-10-21T15:16:53.560 に答える