jQuery插件bgStretcher.js實(shí)現(xiàn)全屏背景特效
bgStretcher 2011 (Background Stretcher)是一個(gè)jQuery的插件，可以為你的網(wǎng)頁(yè)添加多張背景圖，且多個(gè)背景圖能夠自動(dòng)切換，同時(shí)背景圖大小可以自適應(yīng)瀏覽器窗口的大小。背景圖的切換效果有淡入淡出，滾動(dòng)，幻燈，其中選用滾動(dòng)和幻燈時(shí)，可以選擇方向，上下左右，或者左上右下，右上左下。圖片切換順序也可以設(shè)置正向，反向或者隨機(jī)。更多選項(xiàng)就看你自己慢慢研究了。
bgStretcher是一個(gè)jQuery插件，它允許你添加一個(gè)大圖像（或一組圖像）到您的網(wǎng)頁(yè)的背景，并會(huì)按比例調(diào)整圖像大小，以填滿(mǎn)整個(gè)窗口區(qū)域。如果使用多個(gè)圖像模式（幻燈片的速度和持續(xù)時(shí)間可配置），該插件將作為幻燈片。
插件特點(diǎn)：
腳本文件簡(jiǎn)潔，設(shè)置簡(jiǎn)單；支持所有新版瀏覽器；支持單張或者多張圖片。
插件使用：
首先，你當(dāng)然要把插件先下載再說(shuō)，插件包里已經(jīng)包含了所需要的JS文件。
然后，把下面的代碼插入到你網(wǎng)頁(yè)的<head>和</head>之間，這樣后面才能使用插件，注意代碼中的路徑，至于是相對(duì)路徑還是絕對(duì)路徑看你實(shí)際需要。
<link rel="stylesheet" type="text/css" href="./main.css" /> <link rel="stylesheet" type="text/css" href="../bgstretcher.css" /> <script type="text/javascript" src="../jquery-1.5.2.min.js"></script> <script type="text/javascript" src="../bgstretcher.js"></script>
接著把下面的代碼，插入到上面代碼之后，來(lái)初始化 bgStretcher 插件，要告知插件在哪個(gè)元素上起作用，同時(shí)可以配置插件的選項(xiàng)。同樣，注意代碼中的圖片路徑不要出錯(cuò)。
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('.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>
該插件不只是用于整個(gè)網(wǎng)頁(yè)背景哦，還可以用于某個(gè)網(wǎng)頁(yè)元素，當(dāng)然，起碼這個(gè)元素能設(shè)置背景，比如DIV之類(lèi)等等。選擇網(wǎng)頁(yè)元素是通過(guò)ID或者Class來(lái)的，應(yīng)為BODY這個(gè)元素名是網(wǎng)頁(yè)里唯一的元素名，也就是給整個(gè)網(wǎng)頁(yè)設(shè)置背景。如果是給頁(yè)面某一個(gè)DIV塊設(shè)置背景，那你需要給這個(gè)DIV定義一個(gè)ID或者知道它的樣式Class名也行，ID和Class名最好是唯一的，要不然效果很驚人。
插件選項(xiàng)：
| 配置選項(xiàng) | 缺 省 值 | 選項(xiàng)說(shuō)明 |
|---|---|---|
| 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 |
插件方法：
方法名稱(chēng) 方法說(shuō)明
$(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
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
- jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
- jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
- jquery實(shí)現(xiàn)圖片左右切換的方法
- jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)實(shí)例
- jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫(huà)廊效果實(shí)例
- jQuery幻燈片帶縮略圖輪播效果代碼分享
- jQuery左側(cè)大圖右側(cè)小圖焦點(diǎn)圖幻燈切換代碼分享
- jquery帶動(dòng)畫(huà)效果幻燈片特效代碼
- jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊(cè)特效
- jquery左右全屏大尺寸多圖滑動(dòng)效果代碼分享
相關(guān)文章
jquery 元素選擇器使用方法技巧2008-08-08
本文給大家分享了幾個(gè)常用的jQuery代碼，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法
這篇文章主要為大家詳細(xì)介紹了解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法，感興趣的小伙伴們可以參考一下2016-05-05
關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12
jQuery的promise與deferred對(duì)象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對(duì)象在異步回調(diào)中的作用,需要的朋友可以參考下2016-05-05
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門(mén)了。2009-09-09
基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程,文中的示例主要針對(duì)其播放音頻文件的用法,需要的朋友可以參考下2016-03-03
JQuery制作的放大效果的popup對(duì)話框(未添加任何jquery plugin)分享
分享一個(gè)JQuery制作的放大效果的popup對(duì)話框（未添加任何jquery plugin）項(xiàng)目中可以根據(jù)自己的需求來(lái)寫(xiě)css，感興趣的朋友可以了解下哈2013-04-04
一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效
這篇文章主要介紹了一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能,結(jié)合具體實(shí)例形式分析了jQuery實(shí)現(xiàn)拼音與中文漢字的轉(zhuǎn)換操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07