滑鼠懸浮具有背景動畫跟隨效果的導航選單

admin發表於2017-04-15
動畫

本章節分享一段程式碼例項，它實現了滑鼠懸浮，導航背景跟隨效果。

這樣的導航選單當前算是比較流行的，動感且美觀，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html {
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 100%;
}
body, p, html {
  margin: 0;
  padding: 0;
}
ul, li, img {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  vertical-align: middle;
}
a {
  color: #333;
  text-decoration: none;
}
body {
  background: #000;
}
.head {
  position: relative;
  background: #fff;
  z-index: 2;
}
.head-main, .content-main, .foot-main {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}
.head-main {
  height: 60px;
  line-height: 60px;
}
.head-main .logo {
  width: 135px;
  height: 60px;
  position: absolute;
  z-index: 10;
}
.head-main .menu {
  position: relative;
}
.head-main .menu li {
  width: 120px;
  height: 60px;
  float: left;
  line-height: 60px;
}
.head-main .menu li > a, .head-main .menu li span.infor {
  display: inline-block;
  width: 120px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: absolute;
  z-index: 100001;
  font-size: 14px;
}
.head-main .menu li.active > a {
  color: #fff;
  background: #fbb432;
}
.head-main .menu li span.infor {
  line-height: 22px;
}
.head-main .menu li span.infor span {
  font-size: 14px;
  color: #333;
  position: relative;
  top: 15px;
}
.head-main .menu li span.infor a {
  color: #333;
  position: relative;
  top: 8px;
}
.head-main .menu li.active span.infor {
  background: #fbb432;
}
.head-main .menu li.active span.infor span {
  color: #fff;
}
.head-main .menu li.active span.infor a {
  color: #fff;
}
.head-main .menu li:hover a {
  color: #fff;
}
.head-main .menu li:hover span.infor span {
  color: #fff;
}
.head-main .menu li:hover span.infor a {
  color: #fff;
}
#hover-active {
  background: #fbb432;
  position: absolute;
  top: 0;
  height: 60px;
  width: 120px;
  z-index: 10;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function move(obj, json, fn) {
  clearInterval(obj.iTimer);
  var cur = 0;
  obj.iTimer = setInterval(function() {
    var ismove = true;
    for (var attr in json) {
      iTarge = json[attr];
      if (attr == "opacity") {
        cur = Math.round(css(obj, 'opacity') * 100);
      } else {
        cur = parseInt(css(obj, attr));
      }
      var speed = (iTarge - cur) / 8;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if (cur != iTarge) {
        ismove = false;
        if (attr == 'opacity') {
          obj.style.opacity = (cur + speed) / 100;
          obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
        } else {
          obj.style[attr] = cur + speed + "px";
        }
      }
    }
    if (ismove == true) {
      clearInterval(obj.iTimer);
      fn && fn.call(obj)
    }
  }, 5)
}
 
function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
 
var Methods = {
  init: function(_this) {
    ha = $("#hover-active");
    iWidth = ha.width();
    Oli = _this.find("li");
    active = _this.find("li.active");
    ha[0].style.left = active.offset().left - _this.offset().left + "px";
    Methods.hover(_this)
  },
  hover: function(_this) {
    Oli.each(function(i) {
      $(this).hover(
        function() {
          move(ha[0], {
            left: i * iWidth
          }, function() {});
        },
        function() {
          move(ha[0], {
            left: parseInt(active.offset().left - _this.offset().left)
          }, function() {});
        }
      )
    })
  }
};
$(document).ready(function () {
  Methods.init($("#menu"));
})
</script>
</head>
<body>
  <div class="head">
    <div class="head-bg"></div>
    <div class="head-main">
      <div class="logo left"></div>
      <ul class="menu right clearfix" id="menu">
        <div class="hover-active" id="hover-active"></div>
        <li class="active">
          <a href="#">首頁</a>
        </li>
        <li>
          <a href="#">螞蟻部落</a>
        </li>
        <li>
          <a href="#">div教程</a>
        </li>
        <li>
          <a href="#">css3教程</a>
        </li>
        <li>
          <a href="#">ajax教程</a>
        </li>
        <li>
          <a href="#">js教程</a>
        </li>
        <li>
          <a href="#">softwhy.com</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

相關文章