网页背景图缓慢溶解变化

最新推荐文章于 2024-03-30 20:40:58 发布

原创最新推荐文章于 2024-03-30 20:40:58 发布 · 632 阅读

3 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

14 篇文章

订阅专栏

思路其实很简单，用两个<img>元素作为背景图，一个显示另一个隐藏，定时交替变化即可。

    $("<img id='backgroundImage1' />").appendTo('body').css('opacity', '0');
    $("<img id='backgroundImage2' />").appendTo('body').css('opacity', '0');

jQuery先引入两个<img>元素，透明度先都设为0，之后设好图片路径再让其中一个逐渐显示。

    setInterval(function()
    {
        var b1 = $('#backgroundImage1');
        var b2 = $('#backgroundImage2');
        
        if (b1.css('opacity') == '1')
        {
            b1.fadeTo(800, 0);
            b2.attr('src', imgsrc+num+'.jpg').fadeTo(800, 1);
        }
        else 
        {
            b2.fadeTo(800, 0);
            b1.attr('src', imgsrc+num+'.jpg').fadeTo(800, 1);
        }
    }, changeTime);

用setInterval函数定时执行，变化时让当前背景fadeTo(0)，同时改变另一个<img>的路径后fadeTo(1)，如此即有溶解变化的效果。

加上背景图片序数的随机产生后，整个函数代码如下，放在一个通用的js文件里，在需要调用的页面引入即可：

    //背景图片持续渐变 (图片路径，图片总数，变化间隔时间)
    function bgChanging(imgsrc, sumOfBg, changeTime)  
    {
        var lastnum = randomBg(0);  //上一个背景序数
        $("<img id='backgroundImage1' />").appendTo('body').css('opacity', '0');
        $("<img id='backgroundImage2' />").appendTo('body').css('opacity', '0');
        //显示背景
        $("#backgroundImage1").attr('src', imgsrc+lastnum+'.jpg').fadeTo(300, 1);


        setInterval(function()
        {
            var b1 = $('#backgroundImage1');
            var b2 = $('#backgroundImage2');
            lastnum = randomBg(lastnum);
            
            if (b1.css('opacity') == '1')
            {
                b1.fadeTo(800, 0);
                b2.attr('src', imgsrc+lastnum+'.jpg').fadeTo(800, 1);
            }
            else 
            {
                b2.fadeTo(800, 0);
                b1.attr('src', imgsrc+lastnum+'.jpg').fadeTo(800, 1);
            }
        }, changeTime);


        //随机返回背景序数
        function randomBg(lastnum)
        {
            var randomnum = Math.ceil(Math.random()*sumOfBg);
            //防止生成的数字跟原背景序数一样
            while (randomnum == lastnum)
                randomnum = Math.ceil(Math.random()*sumOfBg);
            return randomnum;
        }
    }