一尘不染

在jQuery中使用淡入淡出效果更改身体背景图像

css

嘿,我想在新的背景图像中淡出,每60秒说一次。我将背景图像设置如下:

body {background-image: url(background.jpg);}

现在我想更改它,所以在60秒后将其更改为background2.jpg,然后在60秒后将其更改为background3.jpg,依此类推。

我发现了很多东西,但没有改变它的身体,只是像图像一样……有什么快速解决方案?

谢谢!


阅读 409

收藏
2020-05-16

共1个答案

一尘不染

重新更新UPDATE:

甚至是更新的小提琴(没有arguments.callee)

变化:

  • JavaScript改进
  • CSS更正(现在适合整页)
  • 为图像的随机顺序而不是顺序添加了选项
  • => NEWER Fiddle的替代版本<=(如果OP的img服务器关闭)

大更新


从以前的答案中获得了这段代码的精髓,并添加了一些亮点(使用我的网站背景藏匿的笑声)

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}
2020-05-16