本文介绍了如何使用JavaScript和CSS实现导航栏下划线跟随鼠标滑动的效果。通过监听鼠标事件，动态计算并移动下划线的位置，实现平滑的跟随效果。文章提供了完整的HTML、CSS和JS代码示例，并展示了Vue.js实现方式。
使用JavaScript实现导航栏中鼠标经过时下方横线自动跟随的效果。
HTML结构代码如下：
<div class="header">
<ul class="nav fr">
<li class="nav-item nav-line">
<a href="/" class="nav-link">首页</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">公司介绍</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">产品及解决方案</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">客户案例</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">联系我们</a>
</li>
</ul>
<div class="wrap-line" style="opacity:0"></div>
</div>CSS样式代码如下：
.header{position: absolute; height: 60px; top: 0; left: 0; right: 0; color: #fff;background: rgba(0,0,0,.3); }
.header ul{ padding: 0; margin: 0;}
.header .nav-item{ padding: 0 20px; display: inline-block;}
.header .nav-item a{ text-decoration: none;}
.header .nav-item .nav-link, .header .nav-item:hover .nav-link {color: #fff;}
.header .nav-item .nav-link{ padding: 0; font-size: 15px; height: 60px; line-height: 60px;}
.wrap-line{ display: block; position: absolute; height: 3px; bottom: 5px; background: #fff;}
JavaScript逻辑代码如下：
<script src="jquery.min.js"></script>
<script>
// 导航滑动效果
$(function () {
$('.nav .nav-line').hover(function() {
$('.wrap-line').stop().animate({
left: $(this).position().left + 25,
width: $(this).outerWidth() - 50,
opacity: 1
});
}, function() {
$('.wrap-line').stop().animate({
opacity: 0
});
});
})
</script>补充说明：通过CSS结合JavaScript实现导航栏下划线跟随鼠标滑动的效果。
一个基于Vue.js的导航栏下划线跟随鼠标滑动的效果，纯JavaScript配合CSS实现。
滑动效果演示
下划线会跟随鼠标滑动，并且激活的item下划线会消失。
最终代码示例
<div class="cc">
<div class="aa_box" ref="aa" @mouseleave="handleMouseLeave">
<div
class="aa_item"
v-for="(i, index) in navList"
:key="i"
@click="aaBtn(index)"
@mouseenter="handleMouseEnter(index)"
:class="{ active: index == activeIndex || moveActiveIndex == index }"
>
{{ i }}
</div>
</div>
<div class="aa-line" :style="{ left: handleX + 'px' }"></div>
</div> data() {
return {
activeIndex: 0,
moveActiveIndex: null,
X: 0,
current: 0,
aa_x: 0,
mouse_x: 0,
isMove: false
};
},
computed: {
handleX() {
return this.isMove ? this.mouse_x : this.aa_x;
}
},
methods: {
aaBtn(index) {
this.activeIndex = index;
this.aa_x = this.handleMouver(index);
},
handleMouseEnter(index) {
this.isMove = true;
this.moveActiveIndex = index;
this.mouse_x = this.handleMouver(index);
},
handleMouseLeave() {
this.isMove = false;
this.mouse_x = 0;
this.moveActiveIndex = null;
},
handleMouver(index) {
const aa = this.$refs["aa"].children;
let num = 0;
for (let i = 0; i < aa.length; i++) {
const item = aa[i];
if (i + 1 <= index) {
const itemWidth = item.clientWidth + 50;
num += itemWidth;
}
}
return num;
}
},
到此这篇关于JS实现导航栏下划线跟随鼠标滑动效果的文章就介绍到这了，更多相关JS导航鼠标自动跟随内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！