先前曾分享,透過「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
官方網站: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 //轉場時間
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:
#Chrome:
#Firefox:
[範例預覽] [範例下載]