abstrak：<!DOCTYPE html><html><head> <title>jQuery三級(jí)下拉菜單</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text
<!DOCTYPE html>
<html>
<head>
<title>jQuery三級(jí)下拉菜單</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul, li{list-style: none;}
.box{width:1000px;height:500px;background: url(images/568.jpg) no-repeat;margin: 0 auto;}
.menu{
width: 1000px;
height: 50px;
margin: 0 auto;
box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12);
background: pink;
opacity: 0.8;
position: relative;
}
ul li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
float: left;
font-size: 16px;
color: black;
}
.line{
width: 100px;
height: 5px;
background: deeppink;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="menu">
<ul>
<li name="0">首頁(yè)</li>
<li name="1">動(dòng)畫</li>
<li name="2">←番→</li>
<li name="3">音樂</li>
<li name="4">舞蹈</li>
<li name="5">國(guó)創(chuàng)</li>
<li name="6">鬼畜</li>
<li name="7">生活</li>
<li name="8">搞笑</li>
<li name="9">其他</li>
</ul>
<div class="line"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').slideDown(500);
$('li').hover(function(){
// parseInt() 函數(shù)可解析一個(gè)字符串,并返回一個(gè)整數(shù)
// 獲取<li>標(biāo)簽'name'的屬性值, 再乘100 (因?yàn)閘i標(biāo)簽的寬度是100)
var x = parseInt($(this).attr('name')) * 100;
$('.line').stop().animate({left:x+'px'},300);
},function(){
$('.line').stop().animate({left:'0px'},300);
});
});
</script>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-13 10:06:32
Rumusan guru：我說(shuō)這個(gè)怎么好像見過(guò)呢 寫的很不錯(cuò) 有自己的想法 利用所學(xué)習(xí)的知識(shí)來(lái)完成自己的項(xiàng)目 差不多知識(shí)學(xué)完 項(xiàng)目也相當(dāng)于寫完了！很棒！！