jquery+css3實現熊貓tv導航效果

李增田發布于2019-08-30 13:56 / 3272人閱讀

摘要：效果展示實現原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現綠色框的動畫。通話對標簽類的添加與刪除實現文字顏色的變化。

效果展示 實現原理

請看以下源代碼。

綠色的框對應的代碼是class為ph-nav_shadow的div。
通過jquery來改變遮罩層（.ph-nav_shadow）的left與width值，css3加上動畫效果實現綠色框的動畫。
通話jquery對li標簽類的添加與刪除實現文字顏色的變化。（.ph-nav_item--current）。

具體實現

編寫html代碼

編寫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");
    }); 
});
// 根據this li 獲取需要改變的長度和偏移量
function getLiData(li){
    var left = 0;
    for(let i=0;i
這里只貼了部分代碼，所有代碼下載：鏈接：https://pan.baidu.com/s/1o9vyQDk 密碼：k86z
我是新手，有不足的問題希望提出。

云服務器 GPU云服務器熊貓tv cdn jquery與css3 html3 css3 js jquery 導航欄tab切換效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115654.html

jquery+css3實現熊貓tv導航效果

摘要：效果展示實現原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現綠色框的動畫。通話對標簽類的添加與刪除實現文字顏色的變化。效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 實現原理請看以下源代碼。 ...

worldligang 2019-08-26 11:43 評論0 收藏0
jquery+css3實現熊貓tv導航效果

摘要：效果展示實現原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現綠色框的動畫。通話對標簽類的添加與刪除實現文字顏色的變化。效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 實現原理請看以下源代碼。 ...

LancerComet 2019-08-01 18:34 評論0 收藏0
神奇的選擇器 :focus-within

摘要：的偽類選擇器和偽元素選擇器，讓有了更為強大的功能。劃重點，它或它的后代獲得焦點。另外，劃重點，這個偽類是仍處于實驗室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強大的功能。偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區分的。有個錯誤有必要每次講到偽類都提一下，有時你會發現偽類元素使用了兩個冒號 (::) 而不是一個冒...

clasnake 2019-04-23 13:30 評論0 收藏0
前端常用插件、工具類庫匯總

摘要：頁面調試騰訊開發維護的代碼調試發布，錯誤監控上報，用戶問題定位。同樣是由騰訊開發維護的代碼調試工具，是針對移動端的調試工具。前端業務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。本人微信公眾號：前端修煉之路，歡迎關注本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。另外，感謝白小明，文中很多的工具來源于此。彈出框 layer：http://layer....

GitCafe 2019-08-23 13:57 評論0 收藏0