滑鼠懸浮導航選單底部出現動畫橫線

antzone發表於2018-02-10
動畫

本章節分享一段程式碼例項，它實現了滑鼠懸浮，導航選單底部出現動畫橫條的效果。

程式碼例項如下:

[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()方法一章節。

相關文章