Исчезающий фон изображения с растянутой фоновой музыкой в ​​IE8 (Javascript и CSS) - PullRequest
Новая
       24

Исчезающий фон изображения с растянутой фоновой музыкой в ​​IE8 (Javascript и CSS)

0 голосов
/ 03 апреля 2012

Мне нужно создать фоновое изображение, которое растягивается, чтобы заполнить браузер. Следующий код прекрасно работает во всех браузерах, кроме IE8 и ниже. Проблема IE8 в том, что я могу заставить его исчезать, но не растягиваться или растягиваться, но не исчезать - не оба одновременно.

JAVASCRIPT 

$(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 и выше - моя единственная забота на данный момент Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Из того, что я вижу, вы используете свойство background для элемента html. Что если вы попробуете вместо этого использовать элемент изображения и просто наложить его на свой контент. Я думаю, у вас не возникнет проблем с установкой ширины и высоты (даже в IE8), а затем используйте jfuery .fade () или анимируйте прозрачность.

0 голосов
/ 03 апреля 2012

Эта строка значений фильтра выглядит не совсем правильно.

'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'"
...