鼠标悬浮导航菜单底部出现动画横线

2018-2-10 10:32| 作者: antzone| 查看: 1179| 评论: 0|来自: 蚂蚁部落

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.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>时间日期</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>相册代码</a><span></span></li>
      <li><a>图片特效</a><span></span></li>
      <li><a>softwhy.com</a><span></span></li>
    </ul>
  </div>
</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),以动画方式设置底部线条的尺寸和位置。

二.相关阅读:

(1).hover()可以参阅jQuery hover事件一章节。

(2).stop()可以参阅jQuery stop()方法一章节。

(3).css()可以参阅jQuery css()方法一章节。

(4).animate()可以参阅jQuery animate()方法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部