jQuery Backstretch动态设置背景图片插件
示例图:
示例图为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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。