abstrak：學(xué)到和掌握的距離——實(shí)踐應(yīng)用。今天的知識(shí)點(diǎn)：hover(參數(shù)1：鼠標(biāo)移上，參數(shù)二：鼠標(biāo)離開(kāi))切換事件。還有一個(gè)toggle().自定義動(dòng)畫(huà)效果 animate({CSS屬性},速度，函數(shù)) stop() 不許動(dòng)parsInt(string) 轉(zhuǎn)為整數(shù) 忽略非數(shù)字 它還有個(gè)兄弟 parseFloat(string)轉(zhuǎn)為浮點(diǎn)型<!DOCTYPE html><html lang=&qu
學(xué)到和掌握的距離——實(shí)踐應(yīng)用。
今天的知識(shí)點(diǎn)：hover(參數(shù)1：鼠標(biāo)移上，參數(shù)二：鼠標(biāo)離開(kāi))切換事件。還有一個(gè)toggle().
自定義動(dòng)畫(huà)效果 animate({CSS屬性},速度，函數(shù)) stop() 不許動(dòng)
parsInt(string) 轉(zhuǎn)為整數(shù) 忽略非數(shù)字 它還有個(gè)兄弟 parseFloat(string)轉(zhuǎn)為浮點(diǎ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">首頁(yè)</li>
<li class="m2" name="1">商品</li>
<li class="m3" name="2">收藏夾</li>
<li class="m4" name="3">購(gòu)物車</li>
<li class="m5" name="4">個(gè)人中心</li>
<div class="hr"></div>
</ul>
</div>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-11 10:10:42
Rumusan guru：總結(jié)的很棒！代碼寫(xiě)的也很完整！下劃線跟隨導(dǎo)航的效果在很多網(wǎng)站的導(dǎo)航中都會(huì)出現(xiàn)