摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq下劃線導(dǎo)航</title><script type="text/javascript" src="js/jq_3.3.1_mi.js">&l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq下劃線導(dǎo)航</title>
<script type="text/javascript" src="js/jq_3.3.1_mi.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul {list-style: none;z-index:20;font-size: 14px;}
.menu{width: 600px;height: 40px;margin: 20px auto; text-align: center;background: #BA3032;box-shadow: 0 2px 10px #666;border-radius: 3px;position: relative;}
li{float: left;width: 120px;height: 40px;line-height: 40px;color: #fff;font-family: '微軟雅黑';list-style: none;}
a:link,a:visited,a:hover{color: #fff; text-decoration: none;width:120px;display: block;}
.line{width: 120px;height: 2px;background: #fff;position: absolute;bottom: 0px;z-index: 10px;}
</style>
<script type="text/javascript">
$(function(){
$('a').hover(//獲取a標(biāo)簽，鼠標(biāo)指針經(jīng)過(guò)時(shí)執(zhí)行以下函數(shù)
function(){
$x=parseInt($(this).attr('name'))*120//獲取當(dāng)前a標(biāo)簽的name的屬性
$('.line').stop().animate({left:$x+'px'},300)
},
function(){
$('.line').stop().animate({left:'0px'},300)//鼠標(biāo)的初始化，當(dāng)鼠標(biāo)離開a的時(shí)候，下邊的線回到初始位置
}
)
})
</script>
</head>
<body>
<div>
<ul>
<li ><a href="#" name="0">首頁(yè)</a></li>
<li ><a href="#" name="1">學(xué)院簡(jiǎn)介</a></li>
<li ><a href="#" name="2">部門概況</a></li>
<li ><a href="#" name="3">專業(yè)設(shè)置</a></li>
<li ><a href="#" name="4" >聯(lián)系我們</a></li>
</ul>
<div></div>
</div>
</body>
</html>
知識(shí)點(diǎn)總結(jié)：
用到兩個(gè)主要的函數(shù)parseInt() 和animate()
一、parseInt() 函數(shù)的作用：可解析一個(gè)字符串，并返回一個(gè)整數(shù)。parseInt的返回值只有兩種可能，不是一個(gè)十進(jìn)制整數(shù)，就是NaN，本例中，用parseInt函數(shù)獲取a標(biāo)簽的name屬性
二、animate()函數(shù)的作用：animate()方法執(zhí)行CSS屬性集的自定義動(dòng)畫，該方法會(huì)將一個(gè)屬性在指定或者默認(rèn)的時(shí)間內(nèi)從一個(gè)屬性值變化到另一個(gè)屬性值，由于屬性值是逐漸變化的，所以就形成了所謂的動(dòng)畫效果。
animate()的語(yǔ)法：$(selector).animate(styles,speed,easing,callback)
1、styles用來(lái)設(shè)置對(duì)象屬性值的目標(biāo)值，即需要將屬性值變成什么狀態(tài)或者大小。animate可以操作的屬性很多，但是它不能操作顏色，如對(duì)象背景顏色，字體顏色等，如果想要操作顏色，需要導(dǎo)入官方提供的js文件才可以。
2、speed就是速度，就是對(duì)象屬性值從當(dāng)前的狀態(tài)轉(zhuǎn)換到你設(shè)置的另一個(gè)狀態(tài)的變化時(shí)間
3、easing是描述這個(gè)動(dòng)畫設(shè)一個(gè)怎樣的運(yùn)行過(guò)程，’linear’ 就是勻速的意思，即對(duì)象屬性值從當(dāng)前值變化到另一個(gè)值在固定的時(shí)間內(nèi)是勻速變化的，而默認(rèn)’swing’這個(gè)參數(shù)表示曲線形的運(yùn)動(dòng)模式，剛開始會(huì)慢慢運(yùn)動(dòng)，然后加速，最后減速。
4、callback是一個(gè)回調(diào)函數(shù)表示在動(dòng)畫執(zhí)行完畢以后去調(diào)用的一個(gè)函數(shù)，用了這個(gè)回調(diào)函數(shù)，我們可以實(shí)現(xiàn)讓動(dòng)畫往復(fù)運(yùn)行，即在回調(diào)函數(shù)里面再把對(duì)象屬性值設(shè)置為初始狀態(tài)
批改老師：天蓬老師批改時(shí)間：2019-02-02 11:50:53
老師總結(jié)：這類簡(jiǎn)單動(dòng)畫, 有很多實(shí)現(xiàn)方式, jQuery封裝了這些操作, 讓這個(gè)操作更加的簡(jiǎn)便