abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>下劃線跟隨導(dǎo)航</title><script src="https://code.jquery.com/jquery-3.4.1.js"></script&g
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下劃線跟隨導(dǎo)航</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
body{
margin:0;
}
li{
list-style:none;
}
ul{
padding:0;
width:600px;
height:44px;
background:#000;
margin:0 auto;
position: relative;
}
a{
text-decoration: none;
color:#fff;
}
.item{
width:120px;
height: 44px;
float: left;
text-align: center;
line-height: 44px;
}
.box{
width:120px;
height:2px;
background-color: #dc4900;
border-radius: 1px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$('li').hover(function(){
// 通過name值獲取位移距離
$x = parseInt($(this).attr('name'))*120;
// stop在當(dāng)前位置停止，根據(jù)下一步指令進(jìn)行位置偏移,若不加則每一步都從初始位置偏移
$('.box').stop().animate({left:$x+'px'},300)
},
function(){
$('.box').stop().animate({left:'0px'},300)
}
)
})
</script>
<ul>
<li name="0"><a href="">導(dǎo)航01</a></li>
<li name="1"><a href="">導(dǎo)航02</a></li>
<li name="2"><a href="">導(dǎo)航03</a></li>
<li name="3"><a href="">導(dǎo)航04</a></li>
<li name="4"><a href="">導(dǎo)航05</a></li>
<div></div>
</ul>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-08-22 15:35:18
Teacher's summary：這個動畫的實現(xiàn)原理非常 的簡單的就是一個自定義動畫