实现原理
请看以下源代码
- <div class="ph-nav" data-pdt-block="pheader-n">
- <div class="ph-nav_shadow" style="left: 0px; width: 62px;">
- </div>
- <ul>
- <li class="ph-nav_item ph-nav_item--current">
- <a href="/" rel="external nofollow">
首页
- </a>
- </li>
- <li class="ph-nav_item">
- <a href="/all" rel="external nofollow">
全部
- </a>
- </li>
- ...
- </ul>
- </div>
绿色的框对应的代码是 class 为 ph-nav_shadow 的 div
通过 jquery 来改变遮罩层 (.ph-nav_shadow) 的 left 与 width 值, CSS3 加上动画效果实现绿色框的动画
通话 jquery 对 li 标签类的添加与删除实现文字颜色的变化(.ph-nav_item--current)
具体实现
编写 html 代码
- <header>
- <div class="w">
- <div class="header_logo l"><img src="img/logo.png" alt=""></div>
- <div class="header_nav r">
- <div class="header_nav_shadow"></div>
- <ul>
- <li class="header_nav_li-hover"><a href="">首页</a></li>
- <li><a href="">智能家居</a></li>
- <li><a href="">案例展示</a></li>
- <li><a href="">致创能源</a></li>
- <li><a href="">答疑解惑</a></li>
- <li><a href="">合作加盟</a></li>
- </ul>
- </div>
- </div>
- </header>
编写 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 < li.index(); i++) {
- left += $(".header_nav ul li:eq(" + i + ")").width();
- }
- var change = [left, li.width()];
- return change;
- }
来源: http://www.jb51.net/article/135042.htm