2

特定のdivの固定bg画像に画像遷移効果を適用しようとしています。現在のように見えます– </ p> 

#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を介して画像が呼び出されているので、現在のdivにjavascriptを適用して、フェードイン/フェードアウト遷移効果を実現することは可能ですか？

ありがとう！

4

1 に答える 1

6

JavaScriptとCSSで多くのことができますが、これは基本的にスライドショーを表示するための多くのオプションで非常に解決された問題です。したがって、それらの1つを調べるのが最善かもしれません。でもとにかくやってみよう！

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つあることに気付くかもしれません。それは、すべての画像がブラウザによってダウンロードされたことを確認する前に、スライドショーを開始することです。それを修正する必要があります。私たちが見落としているかもしれない同様の問題があることは間違いありませんが、何を使用するかはあなた次第です。

于 2012-12-08T05:21:34.920 に答える