0

ページの背景として機能する 2 つの画像があります。

<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="background" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="h_background" alt="night" />

CSS は一方を非表示にし、もう一方を表示します。

#background {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}

#h_background {
width: 100%;
height: 100%;
display: none;
position: absolute;
z-index: -1;
}

JavaScript は現在時刻を確認し、正しい背景を設定する必要があります。秒数が 30 を超える場合は、背景を 1 つにします。そうでない場合は、もう一方を設定します。

function setBackground() {

if (secs > 30) {
    $('#h_background').attr('id', 'background');
    $('#background').attr('id', 'h_background');
}

else if (secs < 30) {
    $('#background').attr('id', 'h_background');
    $('#h_background').attr('id', 'background');
}

setTimeout(function() {setBackground()}, 1000);

}​

できるようにしたいのは、時間が切り替わったときに新しい背景にトランジションを追加することです。

現在、背景は自動的に切り替わりますが、滑らかではありません。これを達成するための効果的な方法について何か考えはありますか? 以下は、私がこれまでに持っているものを示す完全な jsfiddle です。 http://jsfiddle.net/gkMVf/2/

4

3 に答える 3

0

css3 が提供する不透明度を試してみます。スムーズな移行のために、より制御されたフェードイン フェードアウト効果を作成します。一方の画像の不透明度は徐々に増加し、もう一方の画像の不透明度は徐々に減少します。

于 2012-11-12T18:07:59.090 に答える
0

jQueryを使用すると、fadeInおよびfadeOut関数を使用できます。

function setBackground() {

    if (secs > 30) {
        $('#h_background').fadeIn();
        $('#background').fadeOut();
    } else {
        $('#background').fadeIn();
        $('#h_background').fadeOut();
    }

    setTimeout( setBackground, 1000 );

}

これは CSS3 や HTML5 に依存しないため、ブラウザとの互換性が良好です。

于 2012-11-12T18:12:42.390 に答える
0

別のユーザーが言及したように、代わりに CSS3 トランジションを使用してみることができます。

次のような CSS を使用します。

.background {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.background.hidden {
    opacity: 0;   
}

次に、次のようないくつかのJavaScript：

setInterval(function() {
    $('.background').toggleClass('hidden');
}, 30000)​

もう少し簡単に動作させることができます。jsFiddle を試してください: http://jsfiddle.net/gkMVf/3/

于 2012-11-12T18:14:19.530 に答える