內容簡介
創建映像地圖本來就很容易，對吧？但是，當您需要全屏幕背景並且需要設置某些圖像在上方時，應該怎樣做呢？
步驟 1：獲取 jQuery（可在此處完成： http://jquery.com）。現今您可以使用它去實現一切，我們不能沒有它。
步驟 2：如果您在 Google 上搜尋，您會發現一些腳本可以幫助您定義全屏幕背景。我使用了 Supersized，它可以在此下載：http://www.buildinternet.com/project/supersized/
為什麼是 Supersized？在我的情況下，我需要我的背景全屏幕並且像一個投影片放映。
步驟 2.2：重要的選項。設置“autoplay：0”，僅在按鈕單擊時播放圖片。設置“horizontal_center：1” 將圖像設置在瀏覽器中央。以降序方式設置標題。
我設置了一個標題以知道我需要顯示哪些熱點。
[js] jQuery(function($){
$.supersized({ autoplay: 0, //Only plays on button click horizontal_center: 1, //Defines the image at the center // Functionality slide_interval: 3000, // Length between transitions transition: 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed: 3000, // Speed of transition // Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'number', 'name', 'blank') slides: [ // Slideshow Images {image: 'images/backgrounds/Frato-795531.jpg', title: 'hotspots_14', thumb: 'images/thumb/ambi_795531.jpg'}, {image: 'images/backgrounds/Frato-794891.jpg', title: 'hotspots_13', thumb: 'images/thumb/ambi_794891.jpg'}
], // Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0 });
}); [/js]
您可以在插件頁面上查看更多選項。
選擇性步驟 2.3: 如您可以看到，我設置了一些縮略圖與滑鼠事件。要做到這一點，您需要在 Supersized 配置的“thumb:”選項中進行設置。
然後，您設置 HTML。 [html]
[/html]
和 CSS。我將它設置在 Supersized.shutter.css 中。
[css]
thumb-tray-wrapper{width:452px; height:60px; position:absolute; text-align:center; bottom:58px!important;
left:50%; z-index:3000; padding:0 0 0 32px; margin:0 0 0 -250px;}
thumb-tray{overflow:hidden; width:427px; height:59px; padding:0;}
ul#thumb-list{width:1500px !important; display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px;}
ul#thumb-list li{list-style:none; background:none; display:inline; width:91px; height:46px; overflow:hidden; float:left; margin:7px 7px; padding:0; display:block !important;}
thumb-back{left:0; background: url(‘../img/btn_play.png’) no-repeat 0 0;} thumb-forward{right:0; background:url(‘../img/btn_play.png’) no-repeat 100% 0;}
[/css]
步驟 3：您需要在 Supersized.shutter.js 中進行一些更改。
在任何圖像轉換之前，我們隱藏熱點，這樣用戶就看不到它移動了。
[js] supersized.shutter.js beforeAnimation : function(direction){
if (api.options.progress_bar && !vars.is_paused) $(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
/* Update Fields —————————-*/ // Update slide caption if ($(vars.slide_caption).length){ (api.getField(‘title’)) ? $(vars.slide_caption).html
