概述
一个vue导航栏下划线跟随鼠标滑动的效果,纯 js + 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;
}
},
最后
以上就是风中枫叶为你收集整理的css + js 实现导航栏下划线跟随鼠标滑动效果滑动效果最终代码的全部内容,希望文章能够帮你解决css + js 实现导航栏下划线跟随鼠标滑动效果滑动效果最终代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复