摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下滑線跟隨導航</title> <script type="text/javasc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下滑線跟隨導航</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">孤獨九劍</li>
<li name="3">西門大官</li>
<li name="4">滅絕師太</li>
<li name="5">相關課件</li>
</ul>
<div style="z-index:10px;width:100px;height:2px;background:#fff;position:absolute;top:30px;"></div>
</div>
</body>
</html>
課程總結和理解：
1、z-index這個css顯示堆疊順序。查了文檔說z-index僅在定位元素上奏效。
本案例中不使用z-index也不影響最終效果，但是老師加了，這個可能是一種習慣。加了可以適應更多的瀏覽器或者成為一種習慣，免得因為堆疊順序問題，導致效果出錯。
2、cursor 移上后顯示的光標效果，課程到現(xiàn)在很久沒用了，今天這個案例用了下。當鞏固
3、parseInt()
定義和用法
parseInt() 函數(shù)可解析一個字符串，并返回一個整數(shù)。
4、重點
巧妙利用li標簽里，name的屬性值，數(shù)字0~5，然后使用attr()設置獲取元素的屬性值也就是name的0~5，乘以100，加上px單位，變成一個參數(shù)值。
最后用animate（）自定義完成下光標跟隨導航的效果。
5、stop()
自定義動畫加載后，用stop()停止動畫到結束的位置，會停在當前位置，操作下個動畫時從當前位置開始。
反之如果不加stop()。鼠標移到下個導航時，下滑線會從原始位置移過去。
所以本次課程，自定義動畫和停止動畫均使用上了。
下面這個沒有選中時，回到起始位置，可以不加這個停止動畫方法的。當然加上也不影響最終效果。
批改老師：天蓬老師批改時間：2018-12-21 16:17:25
老師總結：作業(yè)完成的非常好，有自己的思考。繼續(xù)努力，加油