abstrak：通過學(xué)習(xí)，理解了jQuery的hover()的靈活使用，本次作業(yè)利用a標(biāo)簽重新布局導(dǎo)航菜單，利用hover(）實現(xiàn)下劃線跟隨效果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
通過學(xué)習(xí)，理解了jQuery的hover()的靈活使用，本次作業(yè)利用a標(biāo)簽重新布局導(dǎo)航菜單，利用hover(）實現(xiàn)下劃線跟隨效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下劃線跟隨導(dǎo)航作業(yè)</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="jquery-3.3.1.min.js"></script> -->
<style>
* {
padding: 0;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
line-height: 40px;
}
.nav {
width: 100%;
background-color: hotpink;
position: relative;
}
.menu {
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
text-align: center;
}
.menu a {
width: 100px;
padding-right: 100px;
text-align: center;
position: relative;
}
.line {
position: relative;
left: 0px;
width: 100px;
border: 2px solid rgb(120, 28, 240);
}
</style>
</head>
<body>
<div class="nav">
<div class="menu">
<a href="" id='1'>公司簡介</a>
<a href="" id='2'>公司榮譽</a>
<a href="" id='3'>服務(wù)項目</a>
<a href="" id='4'>技術(shù)支持</a>
<a href="" id='5'>人才招聘</a>
<a href="" id='6'>意見反饋</a>
</div>
<div class="line"></div>
</div>
<script>
$(function () {
$('.line').stop().animate({ left: '200px' }, 300);
$('a').hover(
function () {
$px = parseInt($(this).attr('id')) * 200
$('.line').stop().animate({ left: $px + 'px' }, 300)
},
function () {
$('.line').stop().animate({ left: '200px' }, 300)
}
)
})
</script>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-02-18 13:49:47
Rumusan guru：讓用戶知道當(dāng)前正在操作的對象, 是一種提升用戶體驗的工作, 有很多種方式跟蹤用戶操作, 這是一種