所有分类
  • 所有分类
  • 最新发布

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

2018102004531870

这是一款简单的 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 });
    });
  });
});

 

原文链接:https://www.7zt.cn/543.html,转载请注明出处~~~

0
广告位招租

评论0

疫情期间优惠活动!原XXX包年VIP,现XX;原XXX终身VIP,现XXX。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?