jQuery插件bgStretcher.js实现全屏背景特效_jquery
bgStretcher是一个jQuery插件,它允许你添加一个大图像(或一组图像)到您的网页的背景,并会按比例调整图像大小,以填满整个窗口区域。如果使用多个图像模式(幻灯片的速度和持续时间可配置),该插件将作为幻灯片。
插件特点:
脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片。
插件使用:
首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件。
然后,把下面的代码插入到你网页的
和之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。接着把下面的代码,插入到上面代码之后,来初始化 bgStretcher 插件,要告知插件在哪个元素上起作用,同时可以配置插件的选项。同样,注意代码中的图片路径不要出错。
该插件不只是用于整个网页背景哦,还可以用于某个网页元素,当然,起码这个元素能设置背景,比如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
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇: python中的对象
推荐阅读
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
jQuery实现视频作为全屏幕背景
-
完美兼容各大浏览器的jQuery插件实现图片切换特效
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
jQuery+CSS3实现404背景动画特效【转】
-
jQuery实现视频作为全屏幕背景
-
JQuery插件iScroll实现下拉刷新,滚动翻页特效
-
jquery插件实现代码雨特效
-
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效_jquery
-
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效_jquery