摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../demo/js/jq_3.3.1_mi.js"></script>
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.nav{width: 100px;height: 320px;margin: 0 auto;background: #000;margin-top: 20px;border: 2px solid #ccc;border-radius: 5px;position: relative;}
ul{list-style: none;}
ul li{width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 1px solid;cursor: pointer;color: #fff;}/* cursor: pointer;光标为指针状态 */
.box{z-index: 999;width: 2px;height: 40px;background:#fff;position: absolute;top: 0px;}
</style>
<script>
$(function(){
$('li').hover(function(){
$x=parseInt($(this).attr('name'))*40
$('.box').stop().animate({top:$x+'px'},500)
},function(){
$('.box').stop().animate({top:'0px'},500)
})
})
</script>
</head>
<body>
<div>
<!-- 一级下拉菜单one -->
<ul>
<li name='0'>秒杀</li>
<li name='1'>闪购</li>
<li name='2'>拍卖</li>
<li name='3'>京东时尚</li>
<li name='4'>京东超市</li>
<li name='5'>京东生鲜</li>
<li name='6'>海囤全休</li>
<li name='7'>京东金融</li>
</ul>
<div></div>
</div>
</body>
</html>
总结：
1、先创建$x,当前鼠标移动到li上时，用attr方法获取到li的name值
2、用animate动画，鼠标移动到li时name值成40pxY轴移动
批改老师：查无此人批改时间：2019-02-18 09:18:50
老师总结：完成的不错，下次把代码缩进，看着整齐些。继续加油。
