jQuery插件bgStretcher.js实现全屏背景特效
bgStretcher2011(BackgroundStretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。
bgStretcher是一个jQuery插件,它允许你添加一个大图像(或一组图像)到您的网页的背景,并会按比例调整图像大小,以填满整个窗口区域。如果使用多个图像模式(幻灯片的速度和持续时间可配置),该插件将作为幻灯片。
插件特点:
脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片。
插件使用:
首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件。
然后,把下面的代码插入到你网页的<head>和</head>之间,这样后面才能使用插件,注意代码中的路径,至于是相对路径还是绝对路径看你实际需要。
<linkrel="stylesheet"type="text/css"href="./main.css"/> <linkrel="stylesheet"type="text/css"href="../bgstretcher.css"/> <scripttype="text/javascript"src="../jquery-1.5.2.min.js"></script> <scripttype="text/javascript"src="../bgstretcher.js"></script>
接着把下面的代码,插入到上面代码之后,来初始化bgStretcher插件,要告知插件在哪个元素上起作用,同时可以配置插件的选项。同样,注意代码中的图片路径不要出错。
<scripttype="text/javascript"> $(document).ready(function(){ //InitializeBackgoundStretcher $('.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名最好是唯一的,要不然效果很惊人。
插件选项:
插件方法:
方法名称 方法说明
$(objID).bgStretcher.play() Resumebackgroundslideshow
$(objID).bgStretcher.pause() Pausebackgroundslideshow
$(objID).bgStretcher.sliderDestroy() Destroybackgroundslideshow
浏览器兼容性:
MSInternetExplorer6,7,8,9
MozillaFirefox2,3,4
Opera9+
AppleSafari
GoogleChrome
以上所述就是本文的全部内容了,希望大家能够喜欢。