0

私は誰かがこれで私を助けてくれることを願っています、私は私の体の背景を切り替えるこのjavascriptコードを持っています

function changeDivImage() {
    imgPath = document.body.style.backgroundImage;
    if (imgPath == "url(images/bg.jpg)" || imgPath == "") {
        document.body.style.backgroundImage = "url(images/bg_2.jpg)";
    } else {
        document.body.style.backgroundImage = "url(images/bg.jpg)";
    }
}

私はこのリンクでそれをアクティブにします：

<a href="#" onclick="changeDivImage()">change</a>

私の問題は、IEとFirefoxで正常に機能することですが、Chromeでは、リンクが2回機能してから機能を停止し、基本的にbg_2.jpgに切り替わり、もう一度クリックするとbg.jpgに戻り、その後は機能しなくなります：/

また、これを達成するためのより簡単な方法はありますか？cssだけかも？基本的に私は2つの体の背景画像を持っており、リンクをクリックして1を切り替え、次にもう一度クリックして2を切り替え、次に1に戻ることができるようにしたいです...

最後に、2つの背景をフェードインおよびフェードアウトさせるにはどうすればよいですか？2つを切り替えるのではなく？

4

3 に答える 3

4

CSSクラスを使おう！

CSS ルール

body { background-image: url(images/bg.jpg); }
body.on { background-image: url(images/bg_2.jpg); }

JavaScript:

function changeDivImage() {
    $("body").toggleClass("on");
}

フェードしたい場合は、ページ全体をフェードする必要があります。jQueryfadeInとfadeOut.

于 2013-01-19T05:48:59.753 に答える
2

これがあなたの解決策です：（これは追加の画像もサポートしています）。

var m = 0, imgs = ["images/bg.jpg", "images/bg_2.jpg"];

function changeDivImage()
{
    document.body.style.backgroundImage = "url(" + imgs[m] + ")";
    m = (m + 1) % imgs.length;
}

jsFiddleの作業コードは次のとおりです。

これはjsFiddleのjQuery バージョンです。

更新: CROSS-FADING バージョン

これは jsFiddleのクロスフェード jQuery バージョンです。

ページ全体 (すべての要素を含む) がフェードイン/フェードアウトすることは望ましくありません。背景だけがフェードするはずです。したがって、このバージョンには、背景コンテナーとして使用される div があります。そのz 深さは、ページの一番下の要素を維持するように調整されます。2 つの子を切り替えて、クロスフェード効果を作成します。

HTML:

<div id="bg">
    <div id="bg-top"></div>
    <div id="bg-bottom"></div>
</div>
<a id="bg-changer" href="#">change</a>

CSS:

div#bg, div#bg-top, div#bg-bottom
{
    display: block;
    position: fixed;
    width: 100%;
    /*height: 500px;*/ /* height is set by javascript on every window resize */
    overflow: hidden;
}
div#bg 
{
    z-index: -99;
}

Javascript (jQuery):

var m = 0, 
/* Array of background images. You can add more to it. */
imgs = ["images/bg.jpg", "images/bg_2.jpg"];

/* Toggles the background images with cross-fade effect. */
function changeDivImage()
{
    setBgHeight();
    var imgTop = imgs[m];
    m = (m + 1) % imgs.length;
    var imgBottom = imgs[m];
    $('div#bg')
        .children('#bg-top').show()
        .css('background-image', 'url(' + imgTop + ')')
        .fadeOut('slow')
        .end()
        .children('#bg-bottom').hide()
        .css('background-image', 'url(' + imgBottom + ')')
        .fadeIn('slow');
}

/* Sets the background div height to (fit the) window height. */
function setBgHeight()
{
    var h = $(window).height();
    $('div#bg').height(h).children().height(h);
}

/* DOM ready event handler. */
$(document).ready(function(event)
{
    $('a#bg-changer').click(function(event) { changeDivImage(); });
    changeDivImage(); //fade in the first image when the DOM is ready.
});

/* Window resize event handler. */
$(window).resize(function(event)
{
    setBgHeight(); //set the background height everytime.
});

これはさらに改善される可能性がありますが、アイデアが得られるはずです。

于 2013-01-19T05:51:17.537 に答える
1

これを行うためのよりクリーンな方法があります。デモとして、以下を参照してください。

<button id="toggle" type="button">Toggle Background Color</button>

var togglebg = (function(){
    var bgs = ['black','blue','red','green'];

    return function(){
        document.body.style.backgroundColor = bgs[0];
        bgs.push(bgs.shift());
    }
})();

document.getElementById('toggle').onclick = togglebg;

http://jsfiddle.net/userdude/KYDKG/

明らかに、をに置き換えますが、ColorこれImageはすべて、関数に対してローカルなリストを反復処理しtogglebg、常に最初に使用可能なものを使用します。これも実行する必要がありますwindow.onload。できれば、実行をトリガーするor要素でwindow.addEventListener/として実行する必要があります。window.attachEventbutton

またはjQueryを使用します（タグに気付いたので）：

jQuery(document).ready(function ($) {
    var togglebg = (function () {
        var bgs = ['black', 'blue', 'red', 'green'];

        return function () {
            document.body.style.backgroundColor = bgs[0];
            bgs.push(bgs.shift());
        }
    })();

    $('#toggle').on('click', togglebg);
});

http://jsfiddle.net/userdude/KYDKG/1/

そして、これが実際の画像を使用したDummyImageバージョンです。

jQuery(document).ready(function ($) {
    var togglebg = (function () {
        var bgs = [
                '000/ffffff&text=Black and White',
                '0000ff/ffffff&text=Blue and White',
                'ffff00/000&text=Yellow and Black',
                'ff0000/00ff00&text=Red and Green'
            ],
            url = "url('http://dummyimage.com/600x400/{img}')";

        return function () {
            document.body.style.backgroundImage = url.replace('{img}', bgs[0]);
            bgs.push(bgs.shift());
        }
    })();

    $('#toggle').on('click', togglebg);
});

http://jsfiddle.net/userdude/KYDKG/2/

于 2013-01-19T05:47:28.467 に答える