Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏幕的尺寸,当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形,所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。
具体插件介绍和下载见点此进入
具体食用用法:
一.添加下面必须的JS代码到页面,一般情况下jquery.js是引入的,不要重复
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="/jquery.backstretch.min.js"></script>
二.插件本身提供了三种实例:
1.简单背景自适应窗体大小
<script> $.backstretch("pot-holder.jpg"); </script>
2.点击切换背景
<script> $.backstretch("pot-holder.jpg", {speed: 500}); $("#pot-holder").click(function (e) { e.preventDefault(); $.backstretch("pot-holder.jpg"); }); $("#coffee").click(function (e) { e.preventDefault(); $.backstretch("coffee.jpg"); }); </script>
在适当的地方添加以下代码,当点击时背景会被改变
<button id="pot-holde">点击此处显示背景图片pot-holder.jpg</button> <button id="coffee">点击此处显示背景图片coffee.jpg</button>
3.自动切换背景
<script> $.backstretch([ "pot-holder.jpg", "coffee.jpg", "dome.jpg" ], { fade: 750, duration: 4000 }); </script>
喜欢的小伙伴们,可以动手呢....
感觉用的比较少,不过对个人博客可能用处大点。
赞一个
据说JQ要很快放弃老版本的浏览器支持了。。
感觉用的比较少,不过对个人博客可能用处大点。
动态北京不错,不过要看兼容性了。
一看代码头就大
木有demo不开心-_-
不错呢 来了就点钟了 广告啊 呵呵 你懂的啊
太麻烦了点…
支持所有浏览器?
这个不错,mark一下