摘要：學(xué)到和掌握的距離——實踐應(yīng)用。今天的知識點：hover(參數(shù)1：鼠標(biāo)移上，參數(shù)二：鼠標(biāo)離開)切換事件。還有一個toggle().自定義動畫效果 animate({CSS屬性},速度，函數(shù)) stop() 不許動parsInt(string) 轉(zhuǎn)為整數(shù) 忽略非數(shù)字 它還有個兄弟 parseFloat(string)轉(zhuǎn)為浮點型<!DOCTYPE html><html lang=&qu
學(xué)到和掌握的距離——實踐應(yīng)用。
今天的知識點：hover(參數(shù)1：鼠標(biāo)移上，參數(shù)二：鼠標(biāo)離開)切換事件。還有一個toggle().
自定義動畫效果 animate({CSS屬性},速度，函數(shù)) stop() 不許動
parsInt(string) 轉(zhuǎn)為整數(shù) 忽略非數(shù)字 它還有個兄弟 parseFloat(string)轉(zhuǎn)為浮點型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導(dǎo)航之下劃線跟隨</title>
<script src="jquery/jquery-3.3.1.js"></script>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
ul li {width: 100px;height: 35px;line-height: 35px;text-align: center;cursor: pointer;float: left;color:blanchedalmond;}
.menu_box{width: 100%;background: #ccc;margin-top: 20px;}
.menu{ background: rgb(165, 57, 6);width: 800px;height: 35px;margin: auto;
border-radius: 5px;position: relative;box-shadow:0px 0px 20px rgb(165, 57, 6);}
.hr{width: 100px;height: 2px;background: beige;position: absolute;bottom: 0px;left: 0px;}
</style>
</head>
<body>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.hr').stop().animate({left:$x+'px'},50)
},
function(){
$('.hr').stop().animate({left:'0px'},50)
}
)
})
</script>
<div class="menu_box">
<ul class="menu">
<li class="m1" name="0">首頁</li>
<li class="m2" name="1">商品</li>
<li class="m3" name="2">收藏夾</li>
<li class="m4" name="3">購物車</li>
<li class="m5" name="4">個人中心</li>
<div class="hr"></div>
</ul>
</div>
</body>
</html>
批改老師：韋小寶批改時間：2019-02-11 10:10:42
老師總結(jié)：總結(jié)的很棒！代碼寫的也很完整！下劃線跟隨導(dǎo)航的效果在很多網(wǎng)站的導(dǎo)航中都會出現(xiàn)