-1

画像を画面に合わせて (完全な背景画像ではなく)、下にスクロールしたときに他のコンテンツが表示されるようにするにはどうすればよいですか?

私が話していることの例はここにあります：

http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012

この例では、画面のサイズを変更して下にスクロールしたときに画像がどのように反応するかを見てください。

私はあなたの応答を楽しみにしています。

ありがとうございました。

PS: デモも送っていただけると助かります。ありがとうございました！

4

1 に答える 1

0

次の JS が役立ちます。

    function resizeBackground() 
{
    var targetWidth;
    var targetHeight;

    if (typeof window.innerWidth != 'undefined')
    {
        targetWidth = window.innerWidth,
        targetHeight = window.innerHeight
    }
    else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {
        targetWidth = document.documentElement.clientWidth,
        targetHeight = document.documentElement.clientHeight
    }
    else
    {
        targetWidth = document.getElementsByTagName('body')[0].clientWidth,
        targetHeight = document.getElementsByTagName('body')[0].clientHeight
    }

    var background = new Image();
    background.src = document.getElementById("backgroundImage").src;
    var target = document.getElementById("backgroundImage");
    var sourceWidth = background.width;
    var sourceHeight = background.height;

    if (targetWidth / sourceWidth > targetHeight / sourceHeight)
    {
        target.width = targetWidth;
        target.height = sourceHeight * (targetWidth / sourceWidth);
    }
    else
    {
        target.width = sourceWidth * (targetHeight / sourceHeight);
        target.height = targetHeight;
    }
}
window.onload = resizeBackground;
window.onresize = resizeBackground;

次に、次のようにイメージしたい場所に div を挿入します。

<div id= 'backgroundimage'></div>

そして最後に CSS:

#backgroundimage {background-image:url(image.jpg); width:100%;}
于 2013-07-19T01:13:16.693 に答える