js导航条鼠标悬停上下文字滑动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js导航条鼠标悬停上下文字滑动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="导航条,动画导航,滑动导航" />
<meta name="description" content="js导航条鼠标悬停上下文字滑动" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( $(this) );
});
$("#menu2 li a").hover(function() {
// move down - hide
$(".out", this).stop().animate({'top': '48px'}, 300);
// move down - show
$(".over", this).stop().animate({'top': '0px'}, 300);
}, function() {
// move up - show
$(".out", this).stop().animate({'top': '0px'}, 300);
// move up - hide
$(".over", this).stop().animate({'top': '-48px'}, 300);
});
});
</script>
</head>
<body>
<div id="menu2" class="menu">
<ul>
<li><a href="#">人生已经太匆匆</a></li>
<li><a href="#">我好害怕总是泪眼朦胧</a></li>
<li><a href="#">往事不用再提</a></li>
<li><a href="#">人生已多风雨</a></li>
</ul>
<div class="cls"></div>
</div>
</body>
</html>
css:
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
font-family: "微软雅黑", "宋体";
font-size: 12px;
color: #CCCCCC;
}
.cls {
clear: both;
}
a:focus {
outline: none;
}
.menu {
height: 48px;
display: block;
padding: 0px;
width: 800px;
margin: 40px auto 0 auto;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
overflow: hidden;
position: relative;
line-height: 48px;
text-align: center;
}
.menu ul li a {
position: relative;
display: block;
width: 200px;
height: 48px;
font-family: "微软雅黑", "宋体";
font-size: 14px;
text-decoration: none;
cursor: pointer;
font-weight: bold;
line-height: 48px;
}
.menu ul li a span {
position: absolute;
left: 0;
width: 200px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over, .menu ul li a span.bg {
top: -48px;
}
#menu2 {
background-image: url(../images/s_03.jpg);
background-repeat: repeat;
}
#menu2 ul li a {
color: #FFFFFF;
}
#menu2 ul li a span.over {
color: #FFF;
height: 48px;
width: 200px;
background: #fe9901;
}