jQuery实现网页背景自动淡出切换

字数 342阅读 702

在设计自己的个人主页时,想要一个背景图片自动切换的效果,但是单纯修改url的效果太丑了,希望简单设计一个淡入淡出的特效,百度出来的办法都不太好用,于是自己动手写了一个,仅供参考~

demo如下:

主要设计思想

用两个div层叠,让上面的box1在淡出时,修改下面box2的url切换图片,避免淡出时背景留白,最后修改box1的url。

html:

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

css这里就不给出了,让两个盒子层叠,设置层级,我这里的是box1在上,box2在下,不清楚的可以看一下源码。

js设置定时实现自动轮播,再通过设置动画和css实现切换背景图。

var $box1 = $("#box1");
var $box2 = $("#box2");
var index = 1;
setInterval(fn,5000);
function fn() {
    index++; 
    if(index>3){
        index = 1;
    }
    $box1.animate({opacity:0},700,function() {
        $box1.css({"background-image":"url(./images/"+index+".jpg)",opacity:1});
    });
    $box2.css("background-image","url(./images/"+index+".jpg)");
}

这个要注意两点:

  1. 对于css() 语句,并不会等动画结束后再执行,而是一开始就直接执行。要想使动画结束后再执行css()语句,需要使用回调函数。
  2. 这里先将底层图片切换,然后让顶层的逐渐淡出,最后再修改顶层的图片,如此循环。

关于

demo代码参见:

推荐阅读更多精彩内容