問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]翻選式選單



[jQuery]翻選式選單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
筆者有介紹過一個 Background-Position Animation Plugin,它讓 jQuery.animate 能支援原本所不支援的 background-position 屬性。所以我們就能使用它來做到更多有趣的動畫效果,像這次要教的翻選式選單也是玩玩 background-position 屬性的。


選單的部份筆者是用 ul 來做的:


<body>
    <
h3>水平選單(圖片是垂直)</h3>
    <
ul id="hmenu">
        <
li><a href="#" class="v1">男丁</a></li>
        <
li><a href="#" class="v2">jQuery</a></li>
        <
li><a href="#" class="v3">小神童</a></li>
        <
li><a href="#" class="v4">蠟筆小新</a></li>
    </
ul>
    <
br class="clear" />
</
body>


在看 CSS 設定之前先來看一下選單的背景圖片


Open in new window



圖片雖然有上下兩排,但一開始我們只要讓它顯示上半部,當滑鼠移到選單時再切換到顯示下半部,讓整個動作有"翻"的感覺。CSS 這邊就配合 li 裡面的連結而加上不同的背景圖片;



#hmenu {
    
margin: 0;
    
padding: 0;
    list-
style: none;
}
#hmenu li {
    
float: left;
    
padding: 0 5px;
}
#hmenu li a {
    
display: block;
    
height: 16px; /* 圖片的高/2 */
    
line-height: 16px;    /* ie suck */
    
text-indent: -9999px;
}
#hmenu a.v1 {
    
width:68px; /* 圖片的寬 */
    
background:url(v1.gif) no-repeat 0 0;
}
#hmenu a.v2 {
    
width:67px; /* 圖片的寬 */
    
background:url(v2.gif) no-repeat 0 0;
}
#hmenu a.v3 {
    
width:67px; /* 圖片的寬 */
    
background:url(v3.gif) no-repeat 0 0;
}
#hmenu a.v4 {
    
width: 67px; /* 圖片的寬 */
    
background:url(v4.gif) no-repeat 0 0;
}


比較麻煩的是在 IE 6 中,若超連結沒設 line-height 的話,整個超連結的 height 會超出限制範圍,因此要記得加上 line-height 喔!


做到這邊就已經有個基本的雛型了,接下來就請出我們的 jQuery.animate 來做動畫效果囉:



$(function(){
    
// 幫 #hmenu li a 加上 hover 事件
    
$("#hmenu li a").hover(function(){
        
// 滑鼠移進選項時..
        // 把背景圖片的位置往上移動
        
var _this = $(this),
            
_height = _this.height() * -1;
        
_this.stop().animate({
            
backgroundPosition: "(0px " + _height + "px)"
        
}, 200);
    }, function(){
        
// 滑鼠移出選項時..
        // 把背景圖片的位置移回原位
        
$(this).stop().animate({
            
backgroundPosition: "(0px 0px)"
        
}, 200);
    });
});


這邊用到的也是很基本的 animate 而已,只是記得要引用 Background-Position Animation Plugin 才行喔。


最後我們就能來看效果哩,試著把滑鼠移到選項上面看看:


Open in new window



我們的選項就會往上翻轉吧,若是要往下翻轉的話,那麼就要改一開始的 background-position 及移動的位置就可以了。這題目就當成是作業讓各位自行去練習吧!


現在除了上下翻轉之外,筆者再弄個左右翻轉的範例,因為是左右的關係,所以圖片就要變化一下樣式:


Open in new window



當然 CSS 及 jQuery 也需要配合修改一下,整個範例語法為:



<style type="text/css">
<!--
    
#vmenu {
        
margin: 0;
        
padding: 0;
        list-
style: none;
    }
    
#vmenu li {
        
padding: 5px 0;
    }
    
#vmenu li a {
        
display: block;
        
height: 18px; /* 圖片的高 */
        
line-height: 18px;    /* ie suck */
        
text-indent: -9999px;
    }
    
#vmenu a.h1 {
        
width:40px; /* 圖片的寬/2 */
        
background:url(h1.gif) no-repeat 0 0;
    }
    
#vmenu a.h2 {
        
width:46px; /* 圖片的寬/2 */
        
background:url(h2.gif) no-repeat 0 0;
    }
    
#vmenu a.h3 {
        
width:58px; /* 圖片的寬/2 */
        
background:url(h3.gif) no-repeat 0 0;
    }
    
#vmenu a.h4 {
        
width:82px; /* 圖片的寬/2 */
        
background:url(h4.gif) no-repeat 0 0;
    }
-->
</
style>
<
script type="text/javascript">
<!--
    $(function(){
        
// 幫 #hmenu li a 加上 hover 事件
        
$("#vmenu li a").hover(function(){
            
// 滑鼠移進選項時..
            // 把背景圖片的位置往左移動
            
var _this = $(this),
                
_width = _this.width() * -1;
            
_this.stop().animate({
                
backgroundPosition: "(" + _width + "px 0)"
            
}, 200);
        }, function(){
            
// 滑鼠移出選項時..
            // 把背景圖片的位置移回原位
            
$(this).stop().animate({
                
backgroundPosition: "(0 0)"
            
}, 200);
        });
    });
//-->
</script>
<body>
    <h3>垂直選單(圖片是水平)</h3>
    <ul id="vmenu">
        <li><a href="#" class="h1">男丁</a></li>
        <li><a href="#" class="h2">jQuery</a></li>
        <li><a href="#" class="h3">小神童</a></li>
        <li><a href="#" class="h4">蠟筆小新</a></li>
    </ul>
</body>


瀏覽後的效果就是改成水平的翻轉:


Open in new window



這樣的選單效果是不是很有趣呢?!如果再將選單做整體設計的話,那效果並不會比 Flash 差到那唷。


範例瀏覽:
http://demonstration.abgne.tw/jquery/0009/0009_1.html
http://demonstration.abgne.tw/jquery/0009/0009_2.html
http://demonstration.abgne.tw/jquery/0009/0009_3.html
http://demonstration.abgne.tw/jquery/0009/0009_4.html



以上內容於2009-09-19 12:10 發表在 http://abgne.tw/jquery/apply-jquery/jquery-flipping-menu.html

2009/9/27 8:13
 









[高級搜索]


 

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

 

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

 

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

TOP

【 Flycan.com 】 Powered by XOOPS