快捷導(dǎo)航

JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果

更新時(shí)間：2023年01月11日 09:04:55 作者：JL

這篇文章主要介紹了JS寫常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果，文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下

js寫常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨

html代碼如下：

<div class="header">
    <ul class="nav fr">
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">首頁(yè)</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">產(chǎn)品及解決方案</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">聯(lián)系我們</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;}

js代碼如下：

<script src="jquery.min.js"></script>
<script>
// 導(dǎo)航滑動(dòng)效果
    $(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>

PS：css + js 實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果

一個(gè)vue導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)的效果，純 js + css

在這里插入圖片描述

滑動(dòng)效果

下劃線會(huì)跟隨這鼠標(biāo)滑動(dòng)，并且激活的item下劃線會(huì)消失

最終代碼

    <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;
    }
  },

到此這篇關(guān)于JS寫常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨的文章就介紹到這了,更多相關(guān)js導(dǎo)航鼠標(biāo)自動(dòng)跟隨內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: