jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航效果

LancerComet 發(fā)布于2019-08-01 18:34 / 2126人閱讀

摘要：效果展示實(shí)現(xiàn)原理請(qǐng)看以下源代碼。通過(guò)來(lái)改變遮罩層的與值，加上動(dòng)畫效果實(shí)現(xiàn)綠色框的動(dòng)畫。通話對(duì)標(biāo)簽類的添加與刪除實(shí)現(xiàn)文字顏色的變化。

效果展示 實(shí)現(xiàn)原理

請(qǐng)看以下源代碼。

綠色的框?qū)?yīng)的代碼是class為ph-nav_shadow的div。
通過(guò)jquery來(lái)改變遮罩層（.ph-nav_shadow）的left與width值，css3加上動(dòng)畫效果實(shí)現(xiàn)綠色框的動(dòng)畫。
通話jquery對(duì)li標(biāo)簽類的添加與刪除實(shí)現(xiàn)文字顏色的變化。（.ph-nav_item--current）。

具體實(shí)現(xiàn)

編寫html代碼

  
        
            
            
                 
                 
                     首頁(yè)
                     智能家居
                     案例展示
                     致創(chuàng)能源
                     答疑解惑
                     合作加盟

編寫css代碼

.header_nav{
    width: 592px;
    height: 50px;
    position: relative;
}
.header_nav_shadow{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 72px;
    background: #F29400;
    transition: all ease-in-out .3s;
    z-index: 1;
}
.header_nav ul li{
    display: block;
    float: left;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    transition: all ease-in-out .3s;
    position: relative;
    z-index: 2;
}
.header_nav_li-hover a{
    color: #fff;
}
.header_nav ul li a{
    display: block;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    transition: all ease-in-out .3s;
}

編寫js代碼（主要）

$(document).ready(function() { 
    $(".header_nav ul li").hover(function() { 

        var change =  getLiData($(this));
        $(".header_nav_shadow").css("left",change[0]).width(change[1]);
        $(".header_nav ul").children("li:first-child").removeClass("header_nav_li-hover"); 
        $(this).addClass("header_nav_li-hover"); 
    }, function() { 
        $(".header_nav_shadow").css("left",0).width("72");
        $(this).removeClass("header_nav_li-hover"); 
        $(".header_nav ul").children("li:first-child").addClass("header_nav_li-hover");
    }); 
});
// 根據(jù)this li 獲取需要改變的長(zhǎng)度和偏移量
function getLiData(li){
    var left = 0;
    for(let i=0;i
這里只貼了部分代碼，所有代碼下載：鏈接：https://pan.baidu.com/s/1o9vyQDk 密碼：k86z
我是新手，有不足的問(wèn)題希望提出。