以往看到全屏(螢幕)式的背景幻燈片效果 , 都是在全flash網站上才會看到的 , 這種效果若是拿來呈現高質感的圖片 , 通常能夠帶來非常驚人的視覺效果 , 網站時尚指數絕對爆表 ! 好了廢話這麼多 , 今天要跟大家介紹能夠實現全頁式背景幻燈片效果的一款jQuery功能套件「bgStretcher」! Stretcher 具有有以下幾項特點:
1、簡單的腳本,簡單的部署
2、能夠在所有當代瀏覽器下工作
3、支持一張和多張圖片
4、會自動讓圖片適應整個網頁
Shawn強力推薦給大家 :)
簡易教學網站使用起來非常簡單 , 除了引入相關的css以及js檔案 , 只需要帶入以下程式碼即可完成:- <script type="text/javascript">
- $(document).ready(function(){
-
- // Initialize Backgound Stretcher
- $('body').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: 1024,
- imageHeight: 768,
- slideDirection: 'N',
- slideShowSpeed: 1000,
- transitionEffect: 'fade',
- sequenceMode: 'normal',
- buttonPrev: '#prev',
- buttonNext: '#next',
- pagination: '#nav',
- anchoring: 'left center',
- anchoringImg: 'left center'
- });
-
- });
- </script>
複製代碼 其實這個時候聰明的你一定發現了 , 它是將圖片投影效果指定在body 標籤當中 , 因此若是要將它拿來作為一般的投影片非背景式 , 只需要將body改成指定的div id或是class就可以囉 :)
下方為本套件一些使用的參數與說明 , 可以搭配自由運用與調配 ~
參數名 | 默認值 | 描述 | imageContainer | bgstretcher | bgStretcher 會自動給圖片在DOM樹中創建一個容器,那麼這個參數值就表示容器的ID | resizeProportionally | true | 背景圖片是否會成比例縮放 | resizeAnimate | false | 背景圖片是否會以動畫形式縮放(注意,如果你的圖片過大,則會降低電腦速度) | images | empty | 要循環展示的背景圖片數組 | imageWidth | 1024 | 原始圖片寬度 | imageHeight | 768 | 原始圖片高度 | maxWidth | auto | 圖片最大寬度 | maxHeight | auto | 圖片最大高度 | nextSlideDelay | 3000 (3 seconds) | Numeric value in milliseconds. The parameter sets delay until next slide should start. | slideShowSpeed | normal | 圖片切換速度,可設置成一個整數毫秒數,或設置成 (』fast', 『normal', 』slow') | slideShow | true | 允許或禁止幻燈片的功能 | transitionEffect | fade | 過渡效果(none, simpleSlide, superSlide). | slideDirection | N | 滑動方向: N – north, S – south, W – west, E – East (如果 transitionEffect = superSlide 也可以用: NW, NE, SW, SE). | sequenceMode | normal | 連續模式(back, random) | buttonPrev | empty | 「Previous」按鈕的css選擇器 | buttonNext | empty | 「Next」按鈕的css選擇器 | pagination | empty | 分頁按鈕的css選擇器 | anchoring | left top | bgStrtcher 相對於窗口的對齊方式 | anchoringImg | left top | 圖片相對於窗口的對齊 | preloadImg | false | 是否預加圖片 | stratElementIndex | 0 | 元素的起始索引 | callbackfunction | null | 回調函數名 |
bgstretcher-2.zip
(356.31 KB, 下載次數: 173)
|