jquery竖导航条
37212019-01-24 10:08:26473<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery竖导航条</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{padding:0px;margin:0px;}
body{background:#CCCC33;}
.top{width:100px;height:160px;border:1px solid #336699;border-radius:5px;background:#336699;margin:10px 0px 0px 8px;box-shadow:5px 3px 2px #99CCFF;}
ul{list-style:none;font-size:18px;}
li{width:100px;height:30px;float:left;text-align:center;line-height:30px;}
a{color:#fff;text-decoration:none;}
.n1{width:100px;height:3px;background:#CC6600;z-index:3;margin-top:28px;box-shadow:0 10px 20px yellow;position:relative;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(//用hover来控制动画的切换效果
function(){
$x=parseInt($(this).attr('name'))*30//获取到当前元素的name值，用parseInt返回整数，再乘以li的高度，赋值给变量x
$('.n1').stop().animate({top:$x+'px'},300)//移动div框到当前li标签下方
},
function(){
$('.n1').stop().animate({top:'0px'},300)//div框返回原来位置
}
)
})
</script>
<div class="top">
<ul>
<li name="0"><a href="#">网站首页</a></li>
<li name="1"><a href="#">新闻资讯</a></li>
<li name="2"><a href="#">服务范围</a></li>
<li name="3"><a href="#">营业网店</a></li>
<li name="4"><a href="#">联系方式</a></li>
</ul>
<div class="n1"></div>
</div>
</body>
</html>