jQuery plugin : bgStretcher 背景图片切换效果插件
2013-09-15 18:03
477 查看
转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。 插件特点:
脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片。
插件使用:
首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件。
然后,把下面的代码插入到你网页的<head>和</head>之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。
查看代码
打印?
接着把下面的代码,插入到上面代码之后,来初始化 bgStretcher 插件,要告知插件在哪个元素上起作用,同时可以配置插件的选项。同样,注意代码中的图片路径不要出错。
查看代码
打印?
该插件不只是用于整个网页背景哦,还可以用于某个网页元素,当然,起码这个元素能设置背景,比如DIV之类等等。选择网页元素是通过ID或者Class来的,应为BODY这个元素名是网页里唯一的元素名,也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景,那你需要给这个DIV定义一个ID或者知道它的样式Class名也行,ID和Class名最好是唯一的,要不然效果很惊人。
插件选项:
插件方法:
浏览器兼容性:
MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome
原文在这里,俺稍微翻译了一下,演示效果俺自己调整了参数。 http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。 插件特点:
脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片。
插件使用:
首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件。
然后,把下面的代码插入到你网页的<head>和</head>之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。
查看代码
打印?
1 | < link rel = "stylesheet" type = "text/css" href = "./main.css" /> |
2 | < link rel = "stylesheet" type = "text/css" href = "../bgstretcher.css" /> |
3 | < script type = "text/javascript" src = "../jquery-1.5.2.min.js" ></ script > |
4 | < script type = "text/javascript" src = "../bgstretcher.js" ></ script > |
查看代码
打印?
01 | < script type = "text/javascript" > |
02 | $(document).ready(function(){ |
03 |
04 | // Initialize Backgound Stretcher |
05 | $('.demoo').bgStretcher({ |
06 | 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'], |
07 | imageWidth: 800, |
08 | imageHeight: 400, |
09 | slideDirection: 'N', |
10 | slideShowSpeed: 1000, |
11 | transitionEffect: 'fade', |
12 | sequenceMode: 'normal', |
13 | }); |
14 |
15 | }); |
16 | </ script > |
插件选项:
配置选项 | 缺 省 值 | 选项说明 |
---|---|---|
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
原文在这里,俺稍微翻译了一下,演示效果俺自己调整了参数。 http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
相关文章推荐
- jQuery bgStretcher 背景图片切换效果插件
- jquery 插件bgStretcher 切换背景图片
- 背景图片切换效果
- PageSwitch插件实现100种不同图片切换效果
- 背景图片切换实现轮播效果,并解决抖动问题
- 轮播插件--Flexslider图片轮播、文字图片相结合滑动切换效果
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
- 100种不同图片切换效果插件pageSwitch
- 自定义TabHost实现背景图片随选项卡切换滑动效果
- 利用jQuery中的bgstretcher插件制作幻灯片效果背景
- 自定义TabHost实现背景图片随选项卡切换滑动效果
- Flexslider图片轮播、文字图片相结合滑动切换效果HTML 首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。
- js和jquery 两种写法 鼠标经过图片切换背景效果
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)
- jQuery实现多种切换效果的图片切换的五款插件
- app引导页(背景图片切换加各个页面动画效果)
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
- 纯js实现背景图片切换效果代码
- 前些天写的一jquery首页图片切换插件(额,不知道这种效果叫什么名字)