Welcome to Delicate template
Header
Just another WordPress site
Header

实现背景图自适应效果的jQuery插件Backstretch

4月 7th, 2012 | Posted by 无 名 in jQuery | js

Backstretch 是一款实现动态调整大小的背景图效果的 jQuery 插件,当窗口调整大小的时候,背景图会自适应缩 。

插件本身提供了三种实例:

一:简单背景自适应窗体大小

二:占击切换背景

三:自动切换背景

作者在此基础上再独创一种效果。每次载入页面都随机载入背景图,代码如下:

<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
var maximumBgRange = 4;//设置最大数字
var randomnumber=Math.floor(Math.random()*(maximumBgRange + 1))//随机抽取数字
var imagename = "background"+randomnumber+".jpg";
$.backstretch("images/"+imagename+"", {speed: 0});
</script>

插件下载jquery.backstretch

You can follow any responses to this entry through the RSS 2.0 Both comments and pings are currently closed.

One Response