jQuery插件bgStretcher.js实现全屏背景特效
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。
bgStretcher是一个jQuery插件，它允许你添加一个大图像（或一组图像）到您的网页的背景，并会按比例调整图像大小，以填满整个窗口区域。如果使用多个图像模式（幻灯片的速度和持续时间可配置），该插件将作为幻灯片。
插件特点：
脚本文件简洁，设置简单；支持所有新版浏览器；支持单张或者多张图片。
插件使用：
首先，你当然要把插件先下载再说，插件包里已经包含了所需要的JS文件。
然后，把下面的代码插入到你网页的<head>和</head>之间，这样后面才能使用插件，注意代码中的路径，至于是相对路径还是绝对路径看你实际需要。
<link rel="stylesheet" type="text/css" href="./main.css" /> <link rel="stylesheet" type="text/css" href="../bgstretcher.css" /> <script type="text/javascript" src="../jquery-1.5.2.min.js"></script> <script type="text/javascript" src="../bgstretcher.js"></script>
接着把下面的代码，插入到上面代码之后，来初始化 bgStretcher 插件，要告知插件在哪个元素上起作用，同时可以配置插件的选项。同样，注意代码中的图片路径不要出错。
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('.demoo').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
imageWidth: 800,
imageHeight: 400,
slideDirection: 'N',
slideShowSpeed: 1000,
transitionEffect: 'fade',
sequenceMode: 'normal',
});
});
</script>
该插件不只是用于整个网页背景哦，还可以用于某个网页元素，当然，起码这个元素能设置背景，比如DIV之类等等。选择网页元素是通过ID或者Class来的，应为BODY这个元素名是网页里唯一的元素名，也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景，那你需要给这个DIV定义一个ID或者知道它的样式Class名也行，ID和Class名最好是唯一的，要不然效果很惊人。
插件选项：
| 配置选项 | 缺 省 值 | 选项说明 |
|---|---|---|
| imageContainer | bgstretcher | bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed. |
| resizeProportionally | true | Indicates if background image(s) will be resized proportionally or not. |
| resizeAnimate | false | Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.) |
| images | empty | An array containing list of images to be displayed on page's background. |
| imageWidth | 1024 | Original image's width. |
| imageHeight | 768 | Original image's height. |
| maxWidth | auto | Maximum image's width. |
| maxHeight | auto | Maximum image's height. |
| nextSlideDelay | 3000 (3 seconds) | Numeric value in milliseconds. The parameter sets delay until next slide should start. |
| slideShowSpeed | normal | Numeric value in milliseconds or jQuery string value (‘fast', ‘normal', ‘slow'). The parameter sets the speed of transition between images. |
| slideShow | true | Allows or disallows slideshow functionality. |
| transitionEffect | fade | Transition effect (use also: none, simpleSlide, superSlide). |
| slideDirection | N | Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE). |
| sequenceMode | normal | Sequence mode (use also: back, random) |
| buttonPrev | empty | Previous button CSS selector |
| buttonNext | empty | Next button CSS selector |
| pagination | empty | CSS selector for pagination |
| anchoring | ‘left top' | Anchoring bgStrtcher area regarding window |
| anchoringImg | ‘left top' | Anchoring images regarding window |
| preloadImg | false | For Preload images use true |
| stratElementIndex | 0 | Start element index |
| callbackfunction | null | Name of callback function |
插件方法：
方法名称 方法说明
$(objID).bgStretcher.play() Resume background slideshow
$(objID).bgStretcher.pause() Pause background slideshow
$(objID).bgStretcher.sliderDestroy() Destroy background slideshow
浏览器兼容性：
MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
jquery左右全屏大尺寸多图滑动效果代码分享
本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换
-
jquery实现图片左右切换的方法
本文实例讲述了jquery实现图片左右切换的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
jQuery幻灯片带缩略图轮播效果代码分享
这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码,幻灯片可以点击下方的缩略图切换,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码. 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <html> <head> <title>带缩略图的jQuery幻灯片轮播效果</title> <link href="css/css.css" rel="stylesheet" type=
-
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用 演示 复制代码 代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da
-
jquery带动画效果幻灯片特效代码
本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换
-
jQuery实现左右切换焦点图
演示图: 代码: $(document).ready(function() { greyInitRedux(); ieDropdownsNav(); ieDropdownsFilter(); itemViewer(); jsTabsetInit(); slider(); headerTabs(); carousel(); emergencyClose(); replyLinks(); adjournLinks(); zebra_strip_rows(); visitor_site_slidesh
-
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播代码. 为大家分享的jQuery左侧大图右侧小图焦点图幻灯切换代码如下 ---------------------源码下载 效果查看----------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf
-
jquery实现多屏多图焦点图切换特效的方法
本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')
-
jquery实现带缩略图的全屏图片画廊效果实例
本文实例讲述了jquery实现带缩略图的全屏图片画廊效果.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: (function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options); o = $.meta ? $.extend({}, opts, this.data()) : opts; var c = this.length, l =
-
jquery实现的弹出层登录和全屏层注册特效代码分享
本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码-----------------