实现原理

请看以下源代码

div class=' ph-nav ' data-PDT-block=' pheader-n ' div class=' ph-nav _ shadow ' style=' left : 0px；宽度' : 62px'/div ul Li class=' ph-nav _ item ph-nav _ item-current ' a href='/' rel='外部无跟随'首页/a/Li Li class=' ph-nav _ item ' a href='/all ' rel='外部无跟随'全部/a /li./ul/div绿色的框对应的代码是班级为ph-导航_阴影的div。

通过框架来改变遮罩层(.ph-nav_shadow)的左边的与宽度值，css3加上动画效果实现绿色框的动画。

通话框架对里标签类的添加与删除实现文字颜色的变化。(.ph-nav_item - current)。

具体实现

编写超文本标记语言代码

header div class=' w ' div class=' header _ logo l ' img src=' http : img/logo。png ' alt=' '/div class=' header _ nav r ' div class=' header _ nav _ shadow '/div ul Li class=' header _ nav _ Li-hover ' a href=' '首页/a/li lia href=' '智能家居/a/li lia href=' '案例展示/a/li lia href=' '致创能源/a/li lia href=' '答疑解惑/a/li lia href=' '合作加盟/a/Li/ul/div/div/表头编写钢性铸铁代码。header _ nav { width: 592px高度： 50px相对位置：}.header _ nav _ shadow {位置：绝对值；top : 0；左： 0；底部： 0；宽度： 72px背景# F29400transition:所有轻松进出。3s；z-index : 1；}.标题_导航ul li{ display:块；向左浮动：飞越：隐藏；高度： 50px线高： 50px过渡：所有轻松进出。3s；相对位置：z-index : 2；}.header _ nav _ Li-悬停a { color: # fff}。标题_导航ul阿利{ display : block padd : 0 20px高度： 50px线高： 50px过渡：所有轻松进出。3s；}编写射流研究…代码（主要)

$(文档)。ready(function() { $(')).header _ nav ul Li’).hover(function(){ var change=getLiData($(this))；$('.标题_导航_阴影’).css(“”左，更改[0])。宽度（更改[1]);$('.header _ nav ul’).儿童(“li:first第一个孩子”).移除CLaSS(' header _ nav _ Li-hover ')；$(这个)。添加CLaSS(' header _ nav _ Li-hover ')；}，function() { $(' .标题_导航_阴影’).css(“”左',0)。宽度(' 72 ');$(这个)。移除CLaSS(' header _ nav _ Li-hover ')；$('.header _ nav ul’).儿童(“li:first第一个孩子”).添加CLaSS(' header _ nav _ Li-hover ')；});});//根据这个李获取需要改变的长度和偏移量函数GetLiData(Li){ var left=0；用于(设I=0；伊犁。index()；i ){ left=$(' .header_nav ul li:eq(' i ').宽度();} var change=[左，李。width()]；返回更改；}