jQuery插件bgStretcher.js实现全屏背景特效
作者:bea
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。 bgStretcher是一个jQuery插件,它允许你添加一个大图像(或一组图像)到您的网页的
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
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
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
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript中的replace()方法使用详解
- JavaScript中String.match()方法的使用详解
- JavaScript中操作字符串之localeCompare()方法的使用
- JavaScript中的lastIndexOf()方法使用详解1
- JavaScript中使用concat()方法拼接字符串的教程
- jquery实现点击label的同时触发文本框点击事件的方法
- jquery判断至少有一个checkbox被选中的方法
- js实现点击链接后延迟3秒再跳转的方法
- jQuery实现延迟跳转的方法
- jQuery判断一个元素是否可见的方法
- jquery超简单实现手风琴效果的方法
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- JavaSacript中charCodeAt()方法的使用详解
- 简介JavaScript中charAt()方法的使用
- JavaScript中length属性的使用方法