jQuery实现鼠标悬浮导航菜单底部出现动画横线的代码实例搞代码

本章节分享一段代码实例，它实现了鼠标悬浮，导航菜单底部出现动画横条的效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.gaodaima.com/" />
<title>搞代码</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  border: 0;
}
.header {
  width: 100%;
  background: #F5F5F5;
}
.nav {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
.nav ul li {
  height: 40px;
  line-height: 40px;
  float: left;
  padding: 10px 5px;
  margin: 0px 5px;
  position: relative;
}
.nav ul li a {
  color: #666;
  font-family: 'Microsoft Yahei';
  font-size: 14px;
  text-decoration: none;
}
.nav ul li a:hover {
  color: #000;
  text-decoration: none;
}
.nav ul li span {
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  background: #1FAEFF;
  top: 58px;
  left: 50%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('.nav li').hover(function () {
    $('span', this).stop().css('height', '2px');
    $('span', this).animate({
      left: '0',
      width: '100%',
      right: '0'
    }, 200);
  }, function () {
    $('span', this).stop().animate({
      left: '50%',
      width: '0'
    }, 200);
  });
});
</script>
</head>
<body>
<div class="header">
  <div class="nav">
    <ul>
      <li><a>首页</a><span></span></li>
      <li><a>菜单导航</a><span></span></li>
      <li><a>tab标签</a><span></span></li>
      <li><a>jquery特效</a><span></span></li>
      <li><a>gaodaima.com</a><span></span></li>
    </ul>
  </div>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

img {

border: 0;

}

.header {

width: 100%;

background: #F5F5F5;

}

.nav {

width: 1000px;

margin: 0 auto;

overflow: hidden;

}

.nav ul li {

height: 40px;

line-height: 40px;

float: left;

padding: 10px 5px;

margin: 0px 5px;

position: relative;

}

.nav ul li a {

color: #666;

font-family: 'Microsoft Yahei';

font-size: 14px;

text-decoration: none;

}

.nav ul li a:hover {

color: #000;

text-decoration: none;

}

.nav ul li span {

display: block;

position: absolute;

width: 0px;

height: 0px;

background: #1FAEFF;

top: 58px;

left: 50%;

}

</style>

$(function () {

$('.nav li').hover(function () {

$('span', this).stop().css('height', '2px');

$('span', this).animate({

left: '0',

width: '100%',

right: '0'

}, 200);

}, function () {

$('span', this).stop().animate({

left: '50%',

width: '0'

}, 200);

});

</script>

</head>

<body>

<ul>

<li><a>tab标签</a><span></span></li>

<li><a>jquery特效</a><span></span></li>

<li><a>gaodaima.com</a><span></span></li>

</ul>

</div>

</body>

</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.$(‘.nav li’).hover(function () {}，function(){}）,规定鼠标悬浮和离开执行的函数。

（3）.$(‘span’, this).stop().css(‘height’, ‘2px’)，底部线条其实就是span元素，设置线条的高度为2px，后面添加stop()方法是为了防止动画多次重复执行的现象，大家可以把stop方法去掉连续多次移入移出查看效果。

（4）.$(‘span’, this).animate({ left: ‘0’,

width: ‘100%’,

right: ‘0’

}, 200)，以动画方式设置底部线条的尺寸和位置。

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现鼠标悬浮导航菜单底部出现动画横线的代码实例

Hi，您需要填写昵称和邮箱！