Question

尝试将过渡效果应用于特定div的固定bg图像。目前看起来像 -

#top-header {
background: #FFF url('/images/image001.jpg') no-repeat top center fixed; 
width: 100%;height: 540px;
}   

<div id="top-header"></div>

我知道CSS3允许多个bg图像。由于通过我的CSS调用图像，是否可以将javascript应用于当前div以实现淡入/淡出过渡效果？

谢谢！

Answer 1

你可以用JavaScript和CSS做很多事情但是这是一个非常解决的问题，有很多选项可以基本上显示幻灯片。所以最好看看其中一个。但是我们还是试试吧！

HTML：

<div id="slideshow"></div>

CSS：

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
    opacity: 0;
}

JavaScript的：

$(document).ready(function() {
    var timeToDisplay = 2000;
    var opacityChangeDelay = 50;
    var opacityChangeAmount = 0.05;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;

    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var fadeIn = function(opacity) {
        opacity = opacity + opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity >= 1) {
            slideshow.trigger('fadeIn-complete');
            return;
        }
        setTimeout(function() {
            fadeIn(opacity);
        }, opacityChangeDelay);
    };

    var fadeOut = function(opacity) {
        opacity = opacity - opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity <= 0) {
            slideshow.trigger('fadeOut-complete');
            return;
        }
        setTimeout(function() {
            fadeOut(opacity);
        }, opacityChangeDelay);
    };

    slideshow.on('fadeOut-complete', function(event) {
        transition();
        fadeIn(0);
    });

    slideshow.on('display-complete', function(event) {
        fadeOut(1);
    });

    slideshow.on('fadeIn-complete', function(event) {
        setTimeout(function() {
            slideshow.trigger('display-complete');
        }, timeToDisplay);
    });

    transition();
    fadeIn(0);
});

演示：jsfiddle

当然，jQuery已经有fadeIn和fadeOut所以我们可以通过使用它们来简化我们的代码：

$(document).ready(function() {
    var timeToDisplay = 2000;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;
    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeOut('slow', run);
            }, timeToDisplay);
        });
    }

    run();
});

演示：jsfiddle

我们还可以使用slideDown和slideUp：jsfiddle

那为什么不用这个呢？那么你可以知道一个明显的缺陷：我们在确保所有图像都已被浏览器下载之前开始幻灯片放映。我们应该解决这个问题毫无疑问，我们可能忽略了类似的问题，但选择的是你的用途。

转换多个背景图像

1 个答案: