jQuery插件bgStretcher.js實現(xiàn)全屏背景特效
bgStretcher 2011 (Background Stretcher)是一個jQuery的插件,可以為你的網(wǎng)頁添加多張背景圖,且多個背景圖能夠自動切換,同時背景圖大小可以自適應(yīng)瀏覽器窗口的大小。背景圖的切換效果有淡入淡出,滾動,幻燈,其中選用滾動和幻燈時,可以選擇方向,上下左右,或者左上右下,右上左下。圖片切換順序也可以設(shè)置正向,反向或者隨機。更多選項就看你自己慢慢研究了。
bgStretcher是一個jQuery插件,它允許你添加一個大圖像(或一組圖像)到您的網(wǎng)頁的背景,并會按比例調(diào)整圖像大小,以填滿整個窗口區(qū)域。如果使用多個圖像模式(幻燈片的速度和持續(xù)時間可配置),該插件將作為幻燈片。
插件特點:
腳本文件簡潔,設(shè)置簡單;支持所有新版瀏覽器;支持單張或者多張圖片。
插件使用:
首先,你當(dāng)然要把插件先下載再說,插件包里已經(jīng)包含了所需要的JS文件。
然后,把下面的代碼插入到你網(wǎng)頁的<head>和</head>之間,這樣后面才能使用插件,注意代碼中的路徑,至于是相對路徑還是絕對路徑看你實際需要。
<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>
接著把下面的代碼,插入到上面代碼之后,來初始化 bgStretcher 插件,要告知插件在哪個元素上起作用,同時可以配置插件的選項。同樣,注意代碼中的圖片路徑不要出錯。
<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>
該插件不只是用于整個網(wǎng)頁背景哦,還可以用于某個網(wǎng)頁元素,當(dāng)然,起碼這個元素能設(shè)置背景,比如DIV之類等等。選擇網(wǎng)頁元素是通過ID或者Class來的,應(yīng)為BODY這個元素名是網(wǎng)頁里唯一的元素名,也就是給整個網(wǎng)頁設(shè)置背景。如果是給頁面某一個DIV塊設(shè)置背景,那你需要給這個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
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- jquery左右滾動焦點圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁按鈕
- jQuery實現(xiàn)左右切換焦點圖
- jquery實現(xiàn)多屏多圖焦點圖切換特效的方法
- jquery實現(xiàn)圖片左右切換的方法
- jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實例
- jquery實現(xiàn)帶縮略圖的全屏圖片畫廊效果實例
- jQuery幻燈片帶縮略圖輪播效果代碼分享
- jQuery左側(cè)大圖右側(cè)小圖焦點圖幻燈切換代碼分享
- jquery帶動畫效果幻燈片特效代碼
- jquery實現(xiàn)彈出層登錄和全屏層注冊特效
- jquery左右全屏大尺寸多圖滑動效果代碼分享
相關(guān)文章
關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12jQuery的promise與deferred對象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調(diào)中的作用,需要的朋友可以參考下2016-05-05基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程,文中的示例主要針對其播放音頻文件的用法,需要的朋友可以參考下2016-03-03JQuery制作的放大效果的popup對話框(未添加任何jquery plugin)分享
分享一個JQuery制作的放大效果的popup對話框(未添加任何jquery plugin)項目中可以根據(jù)自己的需求來寫css,感興趣的朋友可以了解下哈2013-04-04jQuery實現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了jQuery實現(xiàn)QQ空間漢字轉(zhuǎn)拼音功能,結(jié)合具體實例形式分析了jQuery實現(xiàn)拼音與中文漢字的轉(zhuǎn)換操作實現(xiàn)技巧,需要的朋友可以參考下2017-07-07