我是靠谱客的博主 风中枫叶,最近开发中收集的这篇文章主要介绍css + js 实现导航栏下划线跟随鼠标滑动效果滑动效果最终代码,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

一个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 实现导航栏下划线跟随鼠标滑动效果滑动效果最终代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(53)

评论列表共有 0 条评论

立即
投稿
返回
顶部