jQuery bgStretcher 背景图片切换效果插件


jQuery bgStretcher (Background Stretcher),可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡 出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。

插件特点:
  脚本文件简洁,设置简单;

  支持所有新版浏览器;

  支持单张或者多张图片。

插件使用:
  首先你要把插件先下载再说,插件包里已经包含了所需要的JS文件。
  然后,把下面的代码插入到你网页的<head>和</head>之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。

<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

接着把下面的代码,插入到上面代码之后,来初始化 bgStretcher 插件,要告知插件在哪个元素上起作用,同时可以配置插件的选项。同样,注意代码中的图片路径不要出错。

复制代码

<script type="text/javascript">$(document).ready(function(){//  Initialize Backgound Stretcher$('BODY').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768});
});</script>

复制代码

该插件不只是用于整个网页背景,还可以用于某个网页元素,当然,起码这个元素能设置背景,比如DIV之类等等。选择网页元素是通过ID或者 Class来的,应为BODY这个元素名是网页里唯一的元素名,也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景,那你需要给这个DIV定 义一个ID或者知道它的样式Class名也行,ID和Class名最好是唯一的,要不然效果很惊人。

复制代码

<script type="text/javascript">$(document).ready(function(){//  Initialize Backgound Stretcher$('.classname-of-div').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768});
});</script>


<body>
<div class="classname-of-div">Your content goes here...</div>
</body>

复制代码

插件选项:

配置选项缺 省 值选项说明
imageContainerbgstretcherbgStretcher 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.
resizeProportionallytrueIndicates if background image(s) will be resized proportionally or not.
resizeAnimatefalseIndicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
imagesemptyAn array containing list of images to be displayed on page's background.
imageWidth1024Original image's width.
imageHeight768Original image's height.
maxWidthautoMaximum image's width.
maxHeightautoMaximum image's height.
nextSlideDelay3000 (3 seconds)Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeednormalNumeric value in milliseconds or jQuery string value ('fast', 'normal', 'slow'). The parameter sets the speed of transition between images.
slideShowtrueAllows or disallows slideshow functionality.
transitionEffectfadeTransition effect (use also: none, simpleSlide, superSlide).
slideDirectionNSlide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceModenormalSequence mode (use also: back, random)
buttonPrevemptyPrevious button CSS selector
buttonNextemptyNext button CSS selector
paginationemptyCSS selector for pagination
anchoring'left top'Anchoring bgStrtcher area regarding window
anchoringImg'left top'Anchoring images regarding window
preloadImgfalseFor Preload images use true
stratElementIndex0Start element index
callbackfunctionnullName 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

下载地址:http://share.weiyun.com/04021d581b34e86d1c73f2dc169aa570

Demo:http://www.ajaxblender.com/script-sources/bgstretcher-2/demo/index.html

主页:http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html


上一篇 下一篇

评论



赞助商

分享

最新加入

最新评论

admin: 22222222222 查看原文 09月18日 17:01