問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]山寨版的 HTC 首頁選單



[jQuery]山寨版的 HTC 首頁選單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
在開始介紹之前,請各位先到 HTC 網站看一下他們首頁長怎樣。


Open in new window


有沒有覺得 HTC 網站上方的 Flash 選單很有趣呢!這次筆者就是要教各位怎樣用 jQuery 做出一個山寨版的 HTC 首頁選單。


我們一樣先看 HTML 選單的部份



<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 的部份:



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 就好。


看一下圖片的寬高:


Open in new window


因為我們的遮罩比一般的大上一點,因此等一下程式中要做一點微調的設定,這樣才不會看起來怪怪的。若沒問題的話,就來看 jQuery 的部份囉!



// 避免無法正確取得選單圖片的寬高
// 因此動作延遲到 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');
    });

    
// 當選單被點擊時..
    
_menu.click(function(){
        
// 把點擊到的項目加上 .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){
                
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,不然就是要變更一下程式的判斷才行。


到這邊就完成整個山寨選單的製作了,讓我們看一下畫面及效果吧:


Open in new window


是不是給它有 9 成以上的相似度了呢!再特別說明一點,HTC 網站的 Flash 選單是當使用者點某一選項時,遮罩內容會馬上就變更,然後會移動到所點選的選項上面後再啟動連結的效果。因此筆者也把這功能加到我們的範例中,所以仔細注意一下整個移動的動作唷!


有上過 jQuery 課程的同學可以對照一下講義範例 5-13,做法及原理是一樣的!


範例瀏覽:
http://demonstration.abgne.tw/jquery/0008/0008.html
http://demonstration.abgne.tw/jquery/0008/0008_home.html(有連結效果)


以上內容於2009-09-16 14:03 發表在 http://abgne.tw/jquery/apply-jquery/jquery-htc-menu.html

2009/9/19 14:56
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS