jq点击导航高亮 html,jq实现导航条鼠标悬浮高亮滑动显示功能

最近有一个高亮的导航上面会有一个动画的悬浮块效果，网上有很多类似的效果，参考了很多，拿过来修修改改，终于实现了我工作中的需求。js部分不是很多：

nav {

position: relative

}

nav #line {

position: absolute;

top: 0;

left: 0;

width: 40px;

height: 2px;

background: -webkit-linear-gradient(315deg, #0c5fa4, #4aa654);

background: -moz- oldlinear-gradient(315deg, #0c5fa4, #4aa654);

background: -o-linear-gradient(315deg, #0c5fa4, #4aa654);

background: linear-gradient(135deg, #0c5fa4, #4aa654);

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;

-moz-transition: all 0.4s;

transition: all 0.4s

}

nav ul {

text-align: center;

position: relative;

z-index: 1

}

nav ul li {

float: left;

margin-right: 40px;

position: relative

}

nav ul li:hover .stair {

color: #1e649f

}

nav ul li.active .stair {

color: #1e649f

}

nav ul li .stair {

color: #333;

font-size: 16px;

height: 64px;

line-height: 64px;

padding: 0 4px;

display: inline-block;

-webkit-transition: all 0.3s;

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

position: relative

}

nav ul li .stair .new-icon {

position: absolute;

width: 22px;

top: 9px;

right: -22px

}

nav ul li .second {

padding-top: 25px;

padding-bottom: 25px;

position: absolute;

width: 150px;

top: 74px;

left: 50%;

margin-left: -95px;

background-color: #fff;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: none

}

nav ul li .second:before {

position: absolute;

content: "";

width: 100%;

height: 10px;

background-color: transparent;

top: -10px;

left: 0;

z-index: 2

}

nav ul li .second .item {

display: block;

line-height: 40px;

color: #666;

font-size: 16px

}

nav ul li .second .item:hover {

color: #1e649f

}

nav ul li .second .item.active {

color: #1e649f

}

• 首页

• 产品中心

• 解决方案

• 服务与支持

// 悬浮的高亮导航

var navActive = $("nav li.active");

$("#line, .triangle-color").width($("li.active").outerWidth());

$("#line, .triangle-color").offset({ left: $("li.active").offset().left })

$("nav li").hover(function () {

$(this).addClass("active").siblings().removeClass("active");

$("#line, .triangle-color").width($("li.active").outerWidth());

$("#line, .triangle-color").offset({ left: $("li.active").offset().left })

}, function () {

$("nav li").removeClass("active");

navActive.addClass("active");

$("#line, .triangle-color").width(navActive.outerWidth());

$("#line, .triangle-color").offset({ left: navActive.offset().left })

});

上面是完整的代码。

基本原理是鼠标移入获得移入导航的偏移位置

($("li.active").offset().left)

和移入导航的宽度，最终把获得的值赋给悬浮的块。

不过记得要获取初始导航高亮的元素$("nav li.active")，因为在鼠标移出导航后，要把悬浮块的位置重新给初始导航。

上面是我的总结，希望能帮到有需要的人，如果有写的有问题的地方，也欢迎朋友能够指出来。