在開始介紹之前,請各位先到 HTC 網站看一下他們首頁長怎樣。
有沒有覺得 HTC 網站上方的 Flash 選單很有趣呢!這次筆者就是要教各位怎樣用 jQuery 做出一個山寨版的 HTC 首頁選單。
我們一樣先看 HTML 選單的部份:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 | <body> <ul id="menu"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="abgne_tw">男丁</a></li> <li><a href="#" id="jellyyoyo">小神童</a></li> <li><a href="#" id="jquery">jQuery</a></li> <li><a href="#" id="flycan">飛肯</a></li> </ul> <div class="bhr"></div> <span id="menuMask"></span> </body> |
每一個連結都有各自的 id,這樣比較方便等下的 CSS 來使用它。接著就直接再來看 CSS 的部份:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | body { margin: 0; padding: 0; } #menu { float: right; margin: 50px 0 0; list-style: none; } #menu li { float: left; } #menu li a { display: block; width: 113px; height: 38px; text-indent: -9999px; } #home { background-image: url('home.png'); } #abgne_tw { background-image: url('abgne_tw.png'); } #jellyyoyo { background-image: url('jellyyoyo.png'); } #jquery { background-image: url('jquery.png'); } #flycan { background-image: url('flycan.png'); } #menuMask { position: absolute; z-index: 10000; display: block; left: 0; } .bhr { clear: both; height: 15px; z-index: 200; margin: 0 auto; background-color: #000; } |
這邊要注意一下,為了方便等下程式的存取控制,因此筆者就把圖片的檔名設成跟連結的 id 一樣,然後遮罩用的黑色圖片也只是多加了個 _black 字樣而已。這邊雖然是把每個選單圖片都拆開來,但如果要改成一張大圖也是可以,只是要控制好 background-position 就好。
看一下圖片的寬高:
因為我們的遮罩比一般的大上一點,因此等一下程式中要做一點微調的設定,這樣才不會看起來怪怪的。若沒問題的話,就來看 jQuery 的部份囉!
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | // 避免無法正確取得選單圖片的寬高 // 因此動作延遲到 window.onload $(window).load(function(){ // 先取得選單的連結及找出 .selected 的選項 // 再取得用來當遮罩的 #menuMask // 因為遮罩圖片比原來選單圖片大,所以設定要顯示的寬高及位置差距 var _menu = $('#menu li>a'), _target = $(_menu).filter('.selected'), _menuMask = $('#menuMask'), _maskHeight = 10, _diffHeight = 8, _maskWidth = 5, _diffWidth = 5; // 如果沒有 .selected 的選項就預設第一個 if(_target.length<=0){ _target = $(_menu).eq(0); } // 圖片預載 _menu.each(function(){ $('<img />').attr('src', $(this).attr('id')+'_black.png').hide().appendTo('body'); }); // 當選單被點擊時.. _menu.click(function(){ // 先移除上一個有 .selected 的超連結 $('.selected').removeClass('selected'); // 把點擊到的項目加上 .selected var _this = $(this).addClass('selected'), _link = _this.attr('href'); // 更換選單的背景圖片及移動選單到該選項上 // 如果選項有連結時,則會在動畫移動完後來轉址 _menuMask.css({ backgroundImage: 'url('+_this.attr('id')+'_black.png)' }).stop().animate({ width: $(this).width() + _maskWidth, height: $(this).height() + _maskHeight, top: $(this).offset().top - _diffHeight, left: $(this).offset().left - _diffWidth }, function(){ // 如果有網址 if(!!_link){ // 如果有 target var _targetAttr = _this.attr('target'); if(!!_targetAttr){ // target = '_blank' 則開新窗 if(_targetAttr.toLowerCase()=='_blank'){ open(_link); }else{ // 連結開在指定的 target id 上 $('#'+_targetAttr).attr('src', _link); } }else{ location = _link; } } }); return false; }).focus(function(){ $(this).blur(); }); // 當瀏覽器尺寸改變時也要重新移動位置 $(window).resize(function () { moveMenu($(_menu).filter('.selected')); }); // 移動遮罩到指定的選項上面 function moveMenu(obj){ _menuMask.css({ width: obj.width() + _maskWidth, height: obj.height() + _maskHeight, top: obj.offset().top - _diffHeight, left: obj.offset().left - _diffWidth, backgroundImage: 'url('+obj.attr('id')+'_black.png)' }); } // 網頁載入後先移動遮罩 moveMenu(_target); }); |
一開始網頁載入後,如果連結有 .selected 的 className 時,則會把遮罩移到該選項上;反之若都沒有時,則把它移到第一個選項上面。因此,各位若有多個頁面時,就要一一的設定一下這樣的 .selected,不然就是要變更一下程式的判斷才行。
到這邊就完成整個山寨選單的製作了,讓我們看一下畫面及效果吧:
是不是給它有 9 成以上的相似度了呢!再特別說明一點,HTC 網站的 Flash 選單是當使用者點某一選項時,遮罩內容會馬上就變更,然後會移動到所點選的選項上面後再啟動連結的效果。因此筆者也把這功能加到我們的範例中,所以仔細注意一下整個移動的動作唷!
有上過 jQuery 課程的同學可以對照一下講義範例 5-13,做法及原理是一樣的!
更新:
2009-09-17
加入圖片預載功能
2010-01-18
加入連結開啟新窗及指定在 iframe
2009-09-17
加入圖片預載功能
2010-01-18
加入連結開啟新窗及指定在 iframe
改了很久
想改成頁籤效果還是不行
有人可救我嗎??
to 新手
可用DIV區塊來作顯示/隱藏
若要用iframe,連結需指定target為該iframe的name
所謂用div區塊作隱藏顯示
是用dw內的行為視窗做的嗎???
可是如果是的話
可以跟本範例 的程式語法一起使用嗎??
因為行為內的顯示隱藏功能 不是要先選擇一個框或是文字
當click時顯示或隱藏某個div
請問我這樣是正確的嗎
你應該可以試著做一個簡單的超連結及 iframe, 然後先試著能點超連結後讓 iframe 連到你指定的網址。
因為怎樣都改不好
希望有範例可以參考= =
to 新手
不清楚你主要實現什麼東西?
建議弄個示意圖
我想要做的是
當滑鼠滑過有mouseover的效果遮罩會移動
當click遮罩的黑色部分時可以有連結效果
當連結時我想要做的是
連結到同頁下方div區域(而這個div區域裡面還會有iframe 可以不用換頁面就能瀏覽很多東西)
最大的困惑點就是 這個htc範例連結時使用語法去指定目標
可是照我這樣做的話下方需要連結的div區域就會跟我按鈕一樣多
而程式碼 所規範的是連結到一個目標
因為我不太會改 所以....
不知道可不可行
你可以參考一下 jQuery 的 load()
可以用load這個函數去代出想要連結的網址
看過解說我大概知道用途
可是如果要應用在各個例子中我就不知道該如何去刪減使用了0.0
我該怎辦呢??
先依官方的範例做一次,我想你應該就知道怎麼做了。
請問遮罩的圖片位置,若我把圖片放在指定的資料夾中,我該改程式的哪些地方才能顯示出圖片呢?
大概在以下註解的部份的圖片位置要改一下
老師您好! 為什麼我只有一個選單的遮罩正常運作,其他都沒有,不知是那裡出錯? 另外我想把選單置中應如何修改?謝謝!!
範例: http://www.mediafire.com/?v4247l3wzaos1aj
因為你其它圖片的檔名的_前面都多了一個 Enter..
請問,當我替每個按鈕加上連結後,它會自動跑回預設的第一個耶。
我應該要怎麼讓 遮罩 停留在原本點選的那一個按鈕上呢???
你有試試第二個範例嗎@@?