資訊專欄INFORMATION COLUMN
摘要：效果展示實現(xiàn)原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現(xiàn)綠色框的動畫。通話對標簽類的添加與刪除實現(xiàn)文字顏色的變化。
效果展示 實現(xiàn)原理
請看以下源代碼。
綠色的框?qū)拇a是class為ph-nav_shadow的div。
通過jquery來改變遮罩層（.ph-nav_shadow）的left與width值，css3加上動畫效果實現(xiàn)綠色框的動畫。
通話jquery對li標簽類的添加與刪除實現(xiàn)文字顏色的變化。（.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");
});
});
// 根據(jù)this li 獲取需要改變的長度和偏移量
function getLiData(li){
var left = 0;
for(let i=0;i
這里只貼了部分代碼，所有代碼下載：鏈接：https://pan.baidu.com/s/1o9vyQDk 密碼：k86z
我是新手，有不足的問題希望提出。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107421.html
摘要：效果展示實現(xiàn)原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現(xiàn)綠色框的動畫。通話對標簽類的添加與刪除實現(xiàn)文字顏色的變化。 效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 實現(xiàn)原理 請看以下源代碼。 ...
摘要：效果展示實現(xiàn)原理請看以下源代碼。通過來改變遮罩層的與值，加上動畫效果實現(xiàn)綠色框的動畫。通話對標簽類的添加與刪除實現(xiàn)文字顏色的變化。 效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 實現(xiàn)原理 請看以下源代碼。 ...
摘要：的偽類選擇器和偽元素選擇器，讓有了更為強大的功能。劃重點，它或它的后代獲得焦點。另外，劃重點，這個偽類是仍處于實驗室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強大的功能。 偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區(qū)分的。 有個錯誤有必要每次講到偽類都提一下，有時你會發(fā)現(xiàn)偽類元素使用了兩個冒號 (::) 而不是一個冒...
摘要：頁面調(diào)試騰訊開發(fā)維護的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....
閱讀 2123·2019-08-29 16:53
閱讀 2699·2019-08-29 16:07
閱讀 2042·2019-08-29 13:13
閱讀 3267·2019-08-26 13:57
閱讀 1331·2019-08-26 13:31
閱讀 2432·2019-08-26 13:22
閱讀 1221·2019-08-26 11:43
閱讀 2084·2019-08-23 17:14
