之前有摆弄过这个功能,不过实现之后非常消耗资源,今天扒了一段比较精简的代码,可以很轻松就实现动态背景,气泡上升。
步骤一
这个相当于一个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: rgba(0,0,0,0.2);width:100%}
可以看出css其实没有什么,就是引用上面准备好的背景图片而已。如果你的id没有搞错那么完成以上步骤之后就可以看到效果了。