1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery外掛-「SuperResize打造全螢幕背景」適用各瀏覽器

jQuery外掛-「SuperResize打造全螢幕背景」適用各瀏覽器

2012/10/22

梅問題-jQuery外掛-SuperResize全螢幕背景適用各瀏覽器

  先前曾分享,透過「CSS3實現自動縮放全螢幕背景」,雖然說很方便,但礙於IE瀏覽器的部分,需IE9.0以上的版本才能正常運作,所以若是使用IE8的朋友,就無法呈現出全螢幕的效果,因此梅干則上網找了好多全螢幕的外掛,雖然說功能相當的強大,但當要客制化成自已所需時,光看到那個原始碼,還真令梅干不知該怎從何下手,因此找了很久,終於找到一款,簡單、好用的全螢幕背景外掛Supersized,可橫掃各個瀏覽器,完全不用擔心使用者的瀏覽器問題,由於已是外掛,因此完全不用寫任何的程式碼,只要簡單設定,就可輕鬆的達到全螢幕的背景啦!


Supersized全螢背景外掛:

適用瀏覽器:IE7.0+、Chrome、Firefox、Safari、Opera
官方網站:http://www.elriks.com/prototypes/index.html
官方展示:http://www.elriks.com/prototypes/lib/scripts/prototypes/_galeries/Supersized/default.htm

Supersized 參數設定:

startwidth: 640 //照片起始長度
startheight: 480 //照片起始寬度
vertical_center: 1 //垂直居中 1居中,0關閉
slideshow: 1 //自動輪播 1開,0關
navigation: 1 //播放控制鈕 1開,0關
transition: 1 //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left //轉場效果
pause_hover: 1 //滑入時停止輪播 1開,0關
slide_counter: 1 //顯示圖片筆數 1開,0關
slide_captions: 1 //圖片名稱
slide_interval: 3000 //轉場時間

Supersized 增加圖片:
加在<div id="supersize">~</div>之間即可,增加圖片img標籤中,可用title來設定圖片名稱。


完成後就可在各平台上運作了。
#IE8.0:
梅問題-jQuery外掛-SuperResize全螢幕背景適用各瀏覽器


#Chrome:
梅問題-jQuery外掛-SuperResize全螢幕背景適用各瀏覽器


#Firefox:
梅問題-jQuery外掛-SuperResize全螢幕背景適用各瀏覽器


[範例預覽] [範例下載]