搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 jQuery全頁式背景幻燈片 Slider 效果 (時尚效果推薦) ...
byadmin 發表於 2013-7-8 20:59:55 , 17521人已閱讀 , 0人回應
網站整頁式背景slider.jpg


以往看到全屏(螢幕)式的背景幻燈片效果 , 都是在全flash網站上才會看到的 , 這種效果若是拿來呈現高質感的圖片 , 通常能夠帶來非常驚人的視覺效果 , 網站時尚指數絕對爆表 ! 好了廢話這麼多 , 今天要跟大家介紹能夠實現全頁式背景幻燈片效果的一款jQuery功能套件「bgStretcher」! Stretcher 具有有以下幾項特點:
1、簡單的腳本,簡單的部署
2、能夠在所有當代瀏覽器下工作
3、支持一張和多張圖片
4會自動讓圖片適應整個網頁

Shawn強力推薦給大家 :)

簡易教學

網站使用起來非常簡單 , 除了引入相關的css以及js檔案 , 只需要帶入以下程式碼即可完成:
  1. <script type="text/javascript">
  2.         $(document).ready(function(){
  3.         
  4.         //  Initialize Backgound Stretcher           
  5.                 $('body').bgStretcher({
  6.                         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'],
  7.                         imageWidth: 1024,
  8.                         imageHeight: 768,
  9.                         slideDirection: 'N',
  10.                         slideShowSpeed: 1000,
  11.                         transitionEffect: 'fade',
  12.                         sequenceMode: 'normal',
  13.                         buttonPrev: '#prev',
  14.                         buttonNext: '#next',
  15.                         pagination: '#nav',
  16.                         anchoring: 'left center',
  17.                         anchoringImg: 'left center'
  18.                 });
  19.                
  20.         });
  21. </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)
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.118914 second(s), 39 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-28 23:50

回頂部