实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
*{padding: 0;margin:0;}
body{background-color: #ccc;}
a{text-decoration:none}
.header {
background-color: #242424;
width: 100%;
height: 70px;
border-bottom: 3px solid #C20C0C;
}
.wrap{
margin: 0 auto;
width: 1100px;
height: inherit;
}
.wrap *{
float: left;
}
.logo{
width: 150px;
height: inherit;
position: relative;
}
.logo a{
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
line-height: 70px;
text-align: center;
}
.menu{
position:relative;
}
.nav {
height: inherit;
width:600px;
}
.nav li{
width: 100px;
height:inherit;
line-height: 70px;
text-align: center;
list-style: none;
font-size: 0.8rem;
color: rgb(218, 218, 218);
cursor: pointer;
}
.srch{
width: 200px;
height: inherit;
position: relative;
}
.srch input{
height: 30px;
border: none;
border-radius: 30px;
text-align: center;
position: absolute;
left: 20px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.login {
width: 150px;
height: inherit;
position: relative;
}
.login a{
font-size: 0.4rem;
color: #ccc;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
position: absolute;
left: 10px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #242424;
border:1px rgb(105, 105, 105) solid;
border-radius: 35px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".nav li").hover(function () {
$li_n=parseInt($(this).attr("name"))*100;
$(".block").stop().animate({left:$li_n+"px",width:"100px"},500)
// $x=parseInt($(this).attr('name'))*100
// $('.block').stop().animate({left:$x+'px',width:'100px'},300)
}, function () {
// out
$(".block").stop().animate({width:"0"},500)
}
);
});
</script>
</head>
<body>
<div class="header">
<div class="wrap">
<h1 class="logo"><a href="">LOGO</a></h1>
<div class="menu">
<ul class="nav">
<li name="0">发现音乐</li>
<li name="1">我的音乐</li>
<li name="2">朋友</li>
<li name="3">商城</li>
<li name="4">音乐人</li>
<li name="5">下载客户端</li>
</ul>
<div class="block" style="z-index:10;height:3px;background:#fff;position:absolute;top:70px;"></div>
</div>
<div class="srch"><input type="text" placeholder="音乐/视频/电台/用户"></div>
<div class="login"><a href="">登录</a></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
