abstrak：<!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;光標為指針狀態(tài) */
.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、先創(chuàng)建$x,當前鼠標移動到li上時，用attr方法獲取到li的name值
2、用animate動畫，鼠標移動到li時name值成40pxY軸移動
Guru membetulkan：查無此人Masa pembetulan：2019-02-18 09:18:50
Rumusan guru：完成的不錯，下次把代碼縮進，看著整齊些。繼續(xù)加油。