码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Backstretch动态设置背景图片插件

时间:2014-10-31 12:05:19      阅读:1151      评论:0      收藏:0      [点我收藏+]

标签:jquery   backstretch   动态设置背景图片插件   

示例图:

bubuko.com,布布扣


示例图为bootstrap3.0做的登录界面,后面的背景图为可切换的动态背景图。


Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏幕的尺寸,当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形,所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

下载地址:https://github.com/srobbin/jquery-backstretch


设置body的背景(不指定任何元素)代码如下:

<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.backstretch.min.js"></script>
<script type="text/javascript">
        $.backstretch("bg.jpg");
</script>

指定元素实现背景切换,设置切换的图片与图片切换的间隔时间duration,代码如下:

<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.backstretch.min.js"></script>
$(function () {
            $(".container").css({ opacity: .8 });   //设置透明度
            $.backstretch([
                  "Images/backgrounds/101_1.jpg",
                  "Images/backgrounds/44_1.jpg"
            ], { duration: 3000, fade: 750 });
        });
 </script>














jQuery Backstretch动态设置背景图片插件

标签:jquery   backstretch   动态设置背景图片插件   

原文地址:http://blog.csdn.net/chinaplan/article/details/40650257

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!