首頁 > web前端 > js教程 > 主體

jQuery漸層發光導航選單的實例代碼_jquery

WBOY
發布: 2016-05-16 17:39:10
原創
1588 人瀏覽過

jQuery漸層發光導航選單的實例代碼_jquery

jQuery漸層發光導航選單的實例代碼_jquery

下面跟大家分享一下具體的實現過程。

HTML標籤結構:

複製程式碼 代碼如下:




CSS樣式:li的樣式:


複製程式碼 程式碼如下:
.animation_menu li{


.animation_menu li{
顯示,並使其水平平鋪顯示*/
    display:block;    float: left;


    /*寬高是背景圖片的*/
    width: 111px;

    height: 50px;


    /*設定文字垂直水平居中*/
    line-height: 50px;

    text-align: center;


    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

初始看到的a的樣式:

程式碼如下:


.animation_menu li a {  *我們背景圖片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;

 為了裡面的span能夠以a為基準進行定位*/
    position: relative;

    display: block;

    /*我們不用純黑色*/
    color: #292724;
    text-decoration:none;
}

hover後看到的span的樣式:

複製程式碼 程式碼如下:

.animation_menu li a sp是我們背景圖片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;
    /*設定區塊模式顯示,並製定寬高和a的寬高一樣,和絕對位置,這是為了使其和a裡面的文字重合顯示*/

    display: block;
    height : 50px;
    width: 111px;
    text-align: center;
    position: absolute;
      color:#FFE2BB ;
}



用sprite技術定位,a和span各種狀態的樣式:

複製程式碼

程式碼如下:

/*正常狀態下的樣式*/
.animation_menu li a {
    /*一般灰色背景*/
    background-position: 0 -153px;}    /*hover藍色高亮背景*/
    .animation_menu li a span {
        background 
/*連結啟動狀態下的樣式*/
.animation_menu li.current a {
     /*一般灰色高亮背景*/    background-position: 0 0;

   background-position: 0 0;}}
    /*hover黃色高亮背景*/
    .animation_menu li.current a span {
       
css的工作到此就結束了,下面我們來看看javascript。

最後是JavaScript
選單的漸變效果主要是透過控制opacity實現的,請看下面程式碼。

複製代碼


代碼如下:

     從0到1,這樣span的樣式和文字就會慢慢的顯示出來,覆蓋a的樣式
        $(this).stop().animate({
          slow");
    },    //mouse out事件

    function () {
        // 當滑鼠移走的時候,可讓滑鼠移走的時候,動態改變了,這樣s原來的a的樣式了。 🎜>);

//綁定click事件,點選目前連接,為li新增current class,同時移除其他li的current class
$(".animation_menu li a").click(function () {
$(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
  ).parent().addClass("current");
});



到此全部結束,希望這個jQuery導航選單能給你一些靈感。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板