abstrak：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script> <styl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<style>nav-animate</style>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.menu{
width: 600px;
height: 35px;
border-radius: 10px;
background: #CCCCCC;
background: #000000;
margin: 20px auto;
position: relative;
box-shadow: 0 2px 20px #000;
}
ul {
list-style: none;
position: relative;
z-index: 20px;
}
li{
width: 100px;
height: 35px;
float: left;
text-align: center;
line-height: 35px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
.ls-x{
width: 85px;
height: 2px;
background: #FFFFFF;
position: absolute;
top: 35px;
z-index: 10px;
}
</style>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.ls-x').stop().animate({left:$x+'px'},500)
},function(){
$('.ls-x').stop().animate({left:'0px'},500)
})
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li name="0">php</li>
<li name="1">html</li>
<li name="2">css</li>
<li name="3">JavaScript</li>
<li name="4">vue</li>
<li name="5">layui</li>
</ul>
<div class="ls-x"></div>
</div>
</body>
</html>
<!--parseInt :返回一個整數(shù)-->
<!--attr()設(shè)置或返回被選元素的屬性值-->
<!--總結(jié)：1、獲取li添加hover執(zhí)行function函數(shù)內(nèi)部代碼 2、將name的值轉(zhuǎn)換為整數(shù)x100（每次移動的距離）并存儲到變量$xz中方便調(diào)用 3、獲取ls-x并暫時停止.stop（）.animate({left:'0px'})在進行動畫 4、鼠標離開后ls-x回到原位0px-->
Guru membetulkan：滅絕師太Masa pembetulan：2018-11-29 16:37:15
Rumusan guru：完成的不錯，布局可以稍微講究下呀！好看點，知識點掌握的不錯！