????：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下滑線跟隨導(dǎo)航</title> <script type="text/javasc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下滑線跟隨導(dǎo)航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{padding:0;margin:0}
ul {list-style:none;z-index:20;position:relative;font-size: 15px;}
li {float: left;cursor:pointer;width: 100px;height: 30px;text-align: center;line-height: 30px;color: #fff;font-weight: bold; }
.menu{width: 600px;position: relative;margin:20px auto;height: 32px;box-shadow: 0 2px 20px #000;background: #AF3434;border-radius:3px; }
</style>
<script type="text/javascript">
// $(document).ready(function(){
// })
$(function(){
$('li').hover(function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},300)
},
function(){
$('.block').stop().animate({left:'0px'},300)
}
)
})
</script>
</head>
<body>
<div>
<ul>
<li name="0">首頁</li>
<li name="1">php中文網(wǎng)</li>
<li name="2">孤獨(dú)九劍</li>
<li name="3">西門大官</li>
<li name="4">滅絕師太</li>
<li name="5">相關(guān)課件</li>
</ul>
<div style="z-index:10px;width:100px;height:2px;background:#fff;position:absolute;top:30px;"></div>
</div>
</body>
</html>
課程總結(jié)和理解：
1、z-index這個(gè)css顯示堆疊順序。查了文檔說z-index僅在定位元素上奏效。
本案例中不使用z-index也不影響最終效果，但是老師加了，這個(gè)可能是一種習(xí)慣。加了可以適應(yīng)更多的瀏覽器或者成為一種習(xí)慣，免得因?yàn)槎询B順序問題，導(dǎo)致效果出錯(cuò)。
2、cursor 移上后顯示的光標(biāo)效果，課程到現(xiàn)在很久沒用了，今天這個(gè)案例用了下。當(dāng)鞏固
3、parseInt()
定義和用法
parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
4、重點(diǎn)
巧妙利用li標(biāo)簽里，name的屬性值，數(shù)字0~5，然后使用attr()設(shè)置獲取元素的屬性值也就是name的0~5，乘以100，加上px單位，變成一個(gè)參數(shù)值。
最后用animate（）自定義完成下光標(biāo)跟隨導(dǎo)航的效果。
5、stop()
自定義動(dòng)畫加載后，用stop()停止動(dòng)畫到結(jié)束的位置，會(huì)停在當(dāng)前位置，操作下個(gè)動(dòng)畫時(shí)從當(dāng)前位置開始。
反之如果不加stop()。鼠標(biāo)移到下個(gè)導(dǎo)航時(shí)，下滑線會(huì)從原始位置移過去。
所以本次課程，自定義動(dòng)畫和停止動(dòng)畫均使用上了。
下面這個(gè)沒有選中時(shí)，回到起始位置，可以不加這個(gè)停止動(dòng)畫方法的。當(dāng)然加上也不影響最終效果。
?? ???：天蓬老師?? ??：2018-12-21 16:17:25
???? ??：作業(yè)完成的非常好，有自己的思考。繼續(xù)努力，加油