欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 菜单和导航 > jQuery菜单条鼠标跟随线条特效

jQuery菜单条鼠标跟随线条特效

jQuery菜单条鼠标跟随线条特效

关键词:菜单,鼠标跟随,线条动画,鼠标跟随线条特效,jquery鼠标跟随特效,jquery鼠标跟随,jquery线条,jquery库,caidan

描述:这是一款简单的jQuery菜单条鼠标跟随线条特效。该特效在当鼠标在菜单项上移动时,会有线条跟随鼠标在菜单项下面移动,并且线条的长度会随着菜单项的长度而变化。

简要教程

这是一款简单的jQuery菜单条鼠标跟随线条特效。该特效在当鼠标在菜单项上移动时,会有线条跟随鼠标在菜单项下面移动,并且线条的长度会随着菜单项的长度而变化。

使用方法

在页面中引入jquery文件。

<script src="js/jquery.min.js" type="text/javascript"></script>         
                
HTML结构

使用时,菜单的HTML结构如下:

<div class="menu">
  <div class="menu-item current-menu-item">
    <h6>Home</h6>
    <div class="wee"></div>
  </div>
  <div class="menu-item">
    <h6>Contact</h6>
  </div>
  <div class="menu-item">
    <h6>About</h6>
  </div>
  <div class="menu-item">
    <h6>Blog</h6>
  </div>
  <div class="menu-item">
    <h6>Jobs</h6>
  </div>
</div>        
                
CSS样式

为菜单添加下面的CSS样式,你可以根据实际情况,添加自己的菜单样式。

.menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu .menu-item {
  position: relative;
  cursor: pointer;
}

.menu .menu-item .wee {
  height: 2px;
  width: 100%;
  background-color: #002b75;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.75s;
}

.menu .menu-item h6 {
  margin: 0;
  padding: 0 1rem 1.5rem;
  font-size: 1rem;
  color: #232323;
  transition: 0.75s;
}

.menu .menu-item:hover h6 { color: #002b75; }

.menu .current-menu-item h6 { color: #002b75; }                      
                
JavaScript

然后使用下面的jQuery代码来时线条在鼠标移动时,跟随鼠标移动。

$(document).ready(function() {
  $(window).on("load resize", function() {
    var $thisnav = $(".current-menu-item").offset().left;
    $(".menu-item").hover(function() {
      var $left = $(this).offset().left - $thisnav;
      var $width = $(this).outerWidth();
      var $start = 0;
      $(".wee").css({ "left": $left , "width": $width });
    }, function() {
      var $initwidth = $(".current-menu-item").width();
      $(".wee").css({ "left": "0" , "width": $initwidth });
    });
  });
});       
                

jQuery菜单条鼠标跟随线条特效的原文地址为:https://codepen.io/cmdeveloped/pen/LdmMwE

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_caidan/8794.html

 在线演示  免费下载
编号:201804110000008794
大小:0.04MB
上传时间:2018-04-12 18:00
素材由用户"s63936712"上传分享。

标签

最新推荐素材

与jQuery菜单条鼠标跟随线条特效相关的素材

.