微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery插件bgStretcher.js实现全屏背景特效

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

bgStretcher是一个jQuery插件,它允许你添加一个大图像(或一组图像)到您的网页的背景,并会按比例调整图像大小,以填满整个窗口区域。如果使用多个图像模式(幻灯片的速度和持续时间可配置),该插件将作为幻灯片

插件特点:

脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片

插件使用:

首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件

然后,把下面的代码插入到你网页的和之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。

rush:xhtml;">

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

rush:js;">

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

插件选项:

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: medium none; text-transform: none; color: rgb(51,51,51); outline-width: medium; padding-bottom: 0px; padding-top: 0px; font: 14px/21px 'Microsoft YaHei',Arial,Tahoma,'hiragino sans gb',Helvetica; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; widows: 1; letter-spacing: normal; outline-color: invert; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px"> ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px"> ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">
ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">配置选项 ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">缺 省 值 ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">选项说明 ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">bgstretcherottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">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 adecoration: none; color: rgb(62,141,214); outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; display: inline !important; outline-color: invert; padding-right: 0px" href="http://getfirebug.com/">FireBugottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">trueottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Indicates if background image(s) will be resized proportionally or not.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">falseottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Indicates if background image(s) will be resized with animation. (Be careful,this may slow down some PCs if your images are large.)ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">ottom: 0px; font-style: normal; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">emptyottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">An array containing list of images to be displayed on page's background.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">1024ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Original image's width.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">768ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Original image's height.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">autoottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Maximum image's width.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">autoottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Maximum image's height.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">3000ottom: 0px; font-style: normal; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">(3 seconds)ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Numeric value in milliseconds. The parameter sets delay until next slide should start.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">normalottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Numeric value in milliseconds or jQuery string value (‘fast',‘normal',‘slow'). The parameter sets the speed of transition between images.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">trueottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Allows or disallows slideshow functionality.ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">fadeottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Transition effect (use also: none,simpleSlide,superSlide).ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Nottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Slide Diraction: N – north,S – south,W – west,E – East (if transitionEffect = superSlide use also: NW,NE,SW,SE).ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">normalottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Sequence mode (use also: back,random)ottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">emptyottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">PrevIoUs button CSS selectorottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">emptyottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Next button CSS selectorottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">emptyottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">CSS selector for paginationottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">‘left top'ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Anchoring bgStrtcher area regarding windowottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">‘left top'ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Anchoring images regarding windowottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">falseottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">For Preload images use trueottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">0ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">Start element indexottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">

ottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">nullottom: medium none; outline-width: medium; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: medium none; outline-color: invert; padding-right: 0px">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

以上所述就是本文的全部内容了,希望大家能够喜欢。

原文地址:https://www.jb51.cc/jquery/54055.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐