0

ブラウザ全体に広がるフェード バックグラウンド イメージを作成する必要があります。次のコードは、IE8 以下を除くすべてのブラウザーで完全に機能します。IE8の問題は、フェードするがストレッチしない、またはストレッチするがフェードしない-両方を同時にではないということです。

ジャバスクリプト

$(document).ready(function(){

    var imgArr = new Array( // relative paths of images
        'images/bg01.jpg',
        'images/bg02.jpg',
        'images/bg03.jpg',
        'images/bg04.jpg',
        'images/bg05.jpg'
    );


var preloadArr = new Array();
var i;


/* preload images */
for(i=0; i < imgArr.length; i++){
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 0;
changeImg();
var intID = setInterval(changeImg, 7500);

/* image rotator */
function changeImg(){
$('#bgFade').animate({opacity: 0}, 1000, function(){
$(this).css({
    'background':'url(' + preloadArr[currImg++%preloadArr.length].src +') center 49px',
    '-webkit-background-size':'cover',
    '-moz-background-size':'cover',
    '-o-background-size':'cover',
    'background-size':'cover',
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''
    });
}).animate({opacity: 1}, 1000);
}

});

これは、IE8（およびそれ以下）でストレッチするために追加した行ですが、フェード機能が壊れています。IE8 が「background-size」をサポートしていれば素晴らしいことですが、サポートしていません。

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''

CSS/HTML

#bgFade {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-1;
}

<div id="bgFade"></div>

IE8 で背景画像を引き伸ばしたりフェードしたりする解決策があることを願っています。ソリューションが IE8 でのみ機能し、IE7 以下では機能しない場合は問題ありません。IE8以降は、現時点で私の唯一の関心事です。前もって感謝します！

4

2 に答える 2

1

私が見ることができるものから、html 要素で background プロパティを使用しています。代わりに画像要素を使用して、コンテンツの背後に重ねてみたらどうなるでしょうか。問題なく（IE8でも）幅と高さを設定してから、jQueryの.fade（）を使用するか、不透明度をアニメーション化できるはずだと思います。

于 2012-04-03T00:23:08.077 に答える
0

このフィルター値の文字列は正しくないようです。

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''

試す：

'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + preloadArr[currImg++%preloadArr.length].src + "'), sizingMethod='scale'"
于 2012-04-03T00:31:52.300 に答える