鼠标悬浮具有背景动画跟随效果的导航菜单

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标悬浮,导航背景跟随效果。

这样的导航菜单当前算是比较流行的,动感且美观,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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;
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 = cur + speed + "px";
}
}
}
if (ismove == true) {
clearInterval(obj.iTimer);
fn && fn.call(obj)
}
}, 5)
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle;
} else {
return getComputedStyle(obj, false);
}
}
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="#">pipipi.net</a>
</li>
</ul>
</div>
</div>
</body>
</html>

鼠标悬浮具有背景动画跟随效果的导航菜单,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮具有背景动画跟随效果的导航菜单就介绍到这了。

鼠标悬浮具有背景动画跟随效果的导航菜单属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容