之前有摆弄过这个功能,不过实现之后非常消耗资源,今天扒了一段比较精简的代码,可以很轻松就实现动态背景,气泡上升。

步骤一

这个相当于一个jQuery插件,所以需要jQuery库的支持,本站使用的是jq 1.11.1版本。至于你用什么方法加载可以自由决定。

步骤二

准备一张上下无缝重复的透明背景图片,这种图片一般是png格式。因为接下来我们就得通过一段简单的js代码让这张图片在指定的div内滚动起来。发挥你的想象力应该可以很容易理解。你可以自己制作,也可以从网上找,也可以下载我提供的这张
图片下载地址

步骤三

添加控制图片滚动的js代码(看注释):

// 动态背景
$(function() {
       var backgroundheight = 2000;
        offset = Math.round(Math.floor(Math.random()* 2001)); 
    function scrollbackground() {
           offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
           $('#footer').css("background-position", "50% " + offset + "px"); // #footer改为背景容器
           setTimeout(function() {
            scrollbackground();
            }, 1 // 这个是速度,数值越小移动越快
        );
       }
    scrollbackground(); // 执行背景滚动
});
步骤四

相应的CSS,看上面的注释,我将#footer作为动态背景的容器,当然你也可以用body,整个网页来实现。所以#footer的css如下:

#footer{background:url(img/dynamic_bg.png) rgba(0,0,0,0.2);width:100%}

可以看出css其实没有什么,就是引用上面准备好的背景图片而已。如果你的id没有搞错那么完成以上步骤之后就可以看到效果了。