abstrait：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動畫效果的導(dǎo)航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.header{ width:100%; height:60px; background:#000}
.main{
width: 980px;
height: 60px;
background: #CCC;
margin: auto;
}
ul{ list-style:none;}
ul li{
float: left;
height: 35px;
width: 80px; text-align:center; margin-top:20px;
}
.twobox{
height: 160px;
width: 170px;
}
.twobox li{
height: 30px;
width: 80px;
position: relative;
font-size: 14px;
text-align:center;
}
.twobox li:hover{
background: #999;
}
</style>
</head>
<body>
<script>
$(function(){
$('.twobox').hide()
$('.one').mouseover(function(){
$('.twobox').slideDown(500)
$('.one').mouseleave(function(){
$('.twobox').slideUp(500)
})
})
})
</script>
<div class="header">
<div class="main">
<ul class="one">
<li>首頁</li>
<li>編程詞典
<ul class="twobox">
<li>php詞典</li>
<li>jquery詞典</li>
<li>html詞典</li>
<li>javascript詞典</li>
<li>技術(shù)文章</li>
<li>php教程</li>
<li>小程序開發(fā)</li>
<li>html教程</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!-- jquery動畫總結(jié)
hide()
show()
toggle() 切換
fadeIn() 淡入
fadeOut()
fadeToggle() 切換
fadeTo() 漸近 0~~1
slideDown() 滑下
slideUp() 滑上
slideToggle() 切換
animate() 自定義動畫
$(function(){
$('button').click(function(){
$('div').animate({left:'250px'},1000)
})
})
stop() 停止動畫
-->
Professeur correcteur：韋小寶Temps de correction：2019-01-12 09:17:35
Résumé du professeur：看到你這頭部 總感覺像是復(fù)制過來的 相信你肯定不是復(fù)制的 動畫效果總結(jié)的很完整 不錯 課后要記得多練習練習