摘要：一、實(shí)現(xiàn)功能當(dāng)鼠標(biāo)在導(dǎo)航條上移動(dòng)時(shí)，下劃線(xiàn)跟著移動(dòng)，背景色和字體顏色改變，鼠標(biāo)移出導(dǎo)航條時(shí)，下劃線(xiàn)回到原位。二、功能代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下滑線(xiàn)跟隨
一、實(shí)現(xiàn)功能
當(dāng)鼠標(biāo)在導(dǎo)航條上移動(dòng)時(shí)，下劃線(xiàn)跟著移動(dòng)，背景色和字體顏色改變，鼠標(biāo)移出導(dǎo)航條時(shí)，下劃線(xiàn)回到原位。
二、功能代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下滑線(xiàn)跟隨導(dǎo)航功能</title>
<script src="../jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
ul{
width: 1000px;
height: 40px;
line-height: 40px;
background: #f5f5f5;
margin: 0 auto;
}
ul li{
float: left;
list-style: none;
width:100px;
text-align: center;
}
ul li a{
text-decoration: none;
color: #333333;
}
ul li a:hover{
color: #fff;
}
</style>
</head>
<body>
<ul style="position:relative">
<li name="0"><a href="">要聞</a></li>
<li name="1"><a href="">國(guó)際</a></li>
<li name="2"><a href="">國(guó)內(nèi)</a></li>
<li name="3"><a href="">社會(huì)</a></li>
<li name="4"><a href="">軍事</a></li>
<li name="5"><a href="">娛樂(lè)</a></li>
<li name="6"><a href="">體育</a></li>
<li name="7"><a href="">汽車(chē)</a></li>
<li name="8"><a href="">科技</a></li>
<li name="9"><a href="">其他</a></li>
<div class="ba"style="position: absolute;width:100px;height: 2px;background:#ff6500;bottom: 0;;"></div>
</ul>
<script>
$(function(){
$('ul li').hover(function(){
var x = parseInt($(this).attr('name'))*100+'px'
$('.ba').stop().animate({left:x},300)
$(this).css('background','pink')
},function(){
$('.ba').stop().animate({left:''},300)
$(this).css('background','#f5f5f5')
})
})
</script>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-01-31 14:33:22
老師總結(jié)：這是把直播課作業(yè)拿到vip里面充數(shù)么??