單元6 設(shè)計(jì)導(dǎo)航菜單類網(wǎng)頁特效

單元6設(shè)計(jì)導(dǎo)航菜單類網(wǎng)頁特效JavaScript+jQuery網(wǎng)頁特效設(shè)計(jì)任務(wù)驅(qū)動(dòng)教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會(huì)設(shè)計(jì)導(dǎo)航菜單類網(wǎng)頁特效掌握J(rèn)avaScript的this指針的使用方法正確使用jQuery的屬性操作方法正確使用jQuery的CSS操作方法教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單網(wǎng)頁0601.html中的導(dǎo)航菜單如圖所示。網(wǎng)頁0601.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708.ddnewhead_mainnav.goods{background:url(images/unite_header.gif)no-repeat-300px0px}.ddnewhead_mainnava.goods:hover{z-index:500;background:#fffurl(images/unite_header.gif)no-repeat-400px0px;cursor:default;任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單序號(hào)程序代碼091011121314151617181920212223242526position:relative}.ddnewhead_addnav.ddnewhead_banga.menu_btn{background:url(images/unite_header.gif)no-repeat-88px-237px;width:59px;text-align:center;border:1pxsolid#ccc;font-weight:bold;padding:3px9px;}.ddnewhead_addnav.ddnewhead_banga.menu_btn:hover{background:url(images/unite_header.gif)no-repeat-238px-237px;color:#f60;text-decoration:none;border:1pxsolid#ee7304;}任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單網(wǎng)頁0601.html中導(dǎo)航菜單對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920<divclass="ddnewhead_topnav"id="_ddnav_class1"><ulclass="ddnewhead_mainnav"><li><aclass="nonce"href=""><span>首頁</span></a></li><li><aclass="book"href="/"><span>圖書</span></a></li><liclass="ddnewhead_goods"><aclass="goods"id="a_baihchannel"onmouseover="baimouseOver();"onmouseout="baimouseOut();"href="javascript:void(0);"><span>百貨</span></a><divclass="ddnewhead_goods_panel"id="_ddnav_guan"style="display:none"onmouseover="baimouseOver();"onmouseout="baimouseOut();"><ul><li><ahref=""><spanclass="goods_link"></span>家居家紡</a><ahref=""><spanclass="goods_link"></span>家具裝飾</a><ahref=""><spanclass="goods_link"></span>手表飾品</a><ahref=""><spanclass="goods_link"></span>鞋包皮具</a></li><li><ahref=""><spanclass="goods_link"></span>手機(jī)數(shù)碼</a><ahref=""><spanclass="goods_link"></span>電腦辦公</a><ahref=""><spanclass="goods_link"></span>玩具文具</a><ahref=""><spanclass="goods_link"></span>家用電器</a></li><li><ahref=""><spanclass="goods_link"></span>家居家紡</a><ahref=""><spanclass="goods_link"></span>潮流服裝</a>任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單序號(hào)程序代碼2122232425262728293031323334353637383940<ahref=""><spanclass="goods_link"></span>美妝個(gè)護(hù)</a><ahref=""><spanclass="goods_link"></span>運(yùn)動(dòng)戶外</a></li><liclass="ddnewhead_goods_panel_list_last"><ahref=""><spanclass="goods_link"></span>食品保健</a><ahref=""><spanclass="goods_link"></span>汽車用品</a></li></ul></div></li><li><aclass=""href=""><span>品牌</span></a></li><li><aclass=""href=""><span>促銷</span></a></li></ul><ulclass="ddnewhead_addnav"><liclass="ddnewhead_bang"><aclass="menu_btn"id="a_topchannel"onmouseover="showgaoji('a_topchannel','_ddnav_bang');"onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');"href="/"target="_blank">當(dāng)當(dāng)榜</a><divclass="ddnewhead_ddbang_panel"id="_ddnav_bang"onmouseover="showgaoji('a_topchannel','_ddnav_bang’)”onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');"><ulclass="ddnewhead_ddbang_list"style="width:67px">任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單序號(hào)程序代碼4142434445464748495051<li><ahref=""target="_blank">圖書暢銷榜</a></li><li><ahref=""target="_blank">五星圖書榜</a></li><li><ahref=""target="_blank">圖書飆升榜</a></li><li><ahref=""target="_blank">新書熱賣榜</a></li><li><ahref=""target="_blank">音樂暢銷榜</a></li><li><ahref=""target="_blank">影視暢銷榜</a></li></ul></div></li></ul></div>在網(wǎng)頁0601.html中實(shí)現(xiàn)下拉菜單功能的JavaScript代碼如表所示。序號(hào)程序代碼01020304050607<scriptlanguage="javascript">varsug_gid=function(node){returndocument.getElementById(node);}functionbaimouseOver(){sug_gid('a_baihchannel').className="goodshover";任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單序號(hào)程序代碼080910111213141516171819202122232425262728293031sug_gid('_ddnav_guan').style.display="block";}functionbaimouseOut(){sug_gid('a_baihchannel').className="goods";sug_gid('_ddnav_guan').style.display="none";}functionshowgaoji(aid,did){varobj=document.getElementById(aid);vardivotherChannel=document.getElementById(did);obj.className="menu_btnhover";divotherChannel.style.zIndex=1000;divotherChannel.style.display="block";}functionhideotherchannel(aid,did){vardivotherChannel=document.getElementById(did);varmydd=document.getElementById(aid);if(divotherChannel.style.display!="none"){divotherChannel.style.display="none";mydd.className="menu_btn";}}</script>目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛尉W(wǎng)頁0602.html中的導(dǎo)航菜單如圖所示。網(wǎng)頁0602.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708.navli.on{background:url(../images/01nav01.png)no-repeat;}.navli.onem{background:url(../images/01nav02.png)no-repeatrighttop;width:100%;}任務(wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛尉W(wǎng)頁0602.html中導(dǎo)航菜單對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920<divid="header"><divclass="nav"><ulid="droplist_ul"><liid="n0"><em><ahref="default.htm">首頁</a></em></li><liid="n1"><em><ahref="#">筆記本</a></em><ul><li><ahref="#">筆記本電腦</a></li><li><ahref="#">筆記本配件</a></li><li><ahref="#">電腦包</a></li></ul></li><liid="n2"><em><ahref="#">數(shù)碼影音</a></em><ul><li><ahref="#">數(shù)碼影像</a></li><li><ahref="#">MP3/MP4</a></li><li><ahref="#">GPS</a></li><li><ahref="#">相機(jī)/攝像機(jī)配件</a></li></ul></li><liid="n3"><em><ahref="#">手機(jī)通信</a></em>任務(wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛涡蛱?hào)程序代碼21222324252627282930<ul><li><ahref="#">手機(jī)通信</a></li><li><ahref="#">手機(jī)配件</a></li></ul></li><liid="n4"><em><ahref="#">硬件外設(shè)</a></em>……</li><liid="n5"><em><ahref="#">辦公設(shè)備</a></em>……</li></ul></div></div>網(wǎng)頁0602.html中實(shí)現(xiàn)導(dǎo)航菜單功能的JavaScript代碼如表所示。序號(hào)程序代碼0102030405060708$(document).ready(function(){headmenu();//頭部導(dǎo)航鏈接樣式});//頭部導(dǎo)航鏈接樣式functionheadmenu(){//導(dǎo)航欄目$(".nav>ul>li:not(#n0)").hover(function(){//鼠標(biāo)指針移動(dòng)至該欄目任務(wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛涡蛱?hào)程序代碼0910111213151617181920212223242526$(".nav>ul>li:not(#n0)").removeClass("on");$(this).addClass("on");$(this).find("ul").show();},function(){//鼠標(biāo)指針離開該欄目$(this).removeClass("on");$(this).find("ul").hide();});//頂部菜單彈出后，鼠標(biāo)指針移動(dòng)樣式替換$(".droplist>li").hover(function(){//鼠標(biāo)指針移動(dòng)$(this).addClass("hover");},function(){//鼠標(biāo)指針離開$(this).removeClass();});}目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛尉W(wǎng)頁0603.html中的導(dǎo)航菜單如圖所示。網(wǎng)頁0603.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708.all_fenlei-h2.leibie{cursor:pointer;line-height:28px;border-bottom:#fae6e51pxsolid;height:28px;}.all_fenlei-h2.leibie-a{border-right:1px#fff6f9;任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛涡蛱?hào)程序代碼09101112131415161718192021222324252627282930border-top:1pxsolid#fff6f9;border-left:1pxsolid#fff6f9;line-height:27px;border-bottom:1pxsolid#fae6e5;height:27px;background-color:#fff;}.all_fenlei-h2.leibie-a.leibieactive{border-right:1px#d23c83;border-top:1pxsolid#d23c83;z-index:999999;margin-left:12px;overflow:hidden;border-left:1pxsolid#d23c83;width:183px;line-height:25px;border-bottom:1pxsolid#d23c83;position:absolute;height:25px;background-color:#fff;}序號(hào)程序代碼313233343536373839404142.all_fenlei-h2.leibie-a.hiddenlsit{z-index:8888;min-height:336px;background:url(../images/leibie-bg.gif)#fffrepeat-yrighttop;left:187px;width:597px;position:absolute;top:-33px;height:348px;border:1pxsolid#d23c83;}任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛尉W(wǎng)頁0603.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920<divclass="l_left"><divclass="qbfl"id="allType"><h2class="all_fenlei"></h2><divclass="all_fenlei-h2"id="leftType"><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">護(hù)膚</a></em><spanclass="small-num">面膜乳液</span><bclass="fl_arrow"></b></div><divclass="hiddenlsit"style="display:none"><divclass="list-left"><dl><dt>面部護(hù)膚</dt><dd>……</dd></dl><dl><dt>眼部護(hù)理</dt><dd>……</dd></dl><dl><dt>唇部護(hù)理</dt>任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛涡蛱?hào)程序代碼212223242526272829303132333435363738394041<dd>……</dd></dl></div><divclass="list-right"><dl><dt>熱賣品牌</dt><dd>……</dd><dt>促銷專區(qū)</dt><dd>……</dd></dl></div></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">彩妝</a></em><spanclass="small-num">睫毛膏</span><bclass="fl_arrow"></b></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">香水</a></em><spanclass="small-num">菲拉格慕雅頓</span><bclass="fl_arrow"></b></div></div>任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛涡蛱?hào)程序代碼424344454647484950515253<divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">美體瘦身</a></em><spanclass="small-num">減肥收腹</span><bclass="fl_arrow"></b></div></div><divclass="leibie"><div><emclass="listnum"><ahref=""target="_blank">全身護(hù)理</a></em><spanclass="small-num">護(hù)手霜潤(rùn)體乳</span><bclass="fl_arrow"></b></div></div>……</div></div></div>網(wǎng)頁0603.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。序號(hào)程序代碼01020304050607080910<scripttype="text/javascript">$("#leftType>div").bind("mouseenter",function(){$(this).attr("class","leibie-a").find("div:first").attr("class","leibieactive");$(this).find("div.hiddenlsit").show()});$("#leftType>div").bind("mouseleave",function(){$(this).find("div.hiddenlsit").hide();$(this).attr("class","leibie")});</script>6.1JavaScript的this指針JavaScript中最容易使人迷惑的恐怕就數(shù)this指針了，this指針在傳統(tǒng)面向?qū)ο笳Z言中是在類中聲明的，表示對(duì)象本身，而在JavaScript中，this表示當(dāng)前上下文，即調(diào)用者的引用。varjack={//定義一個(gè)人，名字為Jackname:"Jack",age:26}vartom={//定義另一個(gè)人，名字為Tomname:"Tom",age:24}functionprintName(){//定義一個(gè)全局的函數(shù)對(duì)象return;}alert(printName.call(jack));//設(shè)置printName的上下文為jack，此時(shí)的this為jackalert(printName.call(tom));//設(shè)置printName的上下文為tom，此時(shí)的this為tom6.2jQuery的屬性操作方法addClass()方法用于向被選元素添加一個(gè)或多個(gè)類。01OPTIONjQuery的addClass()方法$("btn").click(function(){$("h1,h2,p").addClass("top");//在添加類時(shí)可以選取多個(gè)元素$("div").addClass("content");});removeClass()方法用于從被選元素中刪除一個(gè)或多個(gè)類。jQuery的removeClass()方法$("btn").click(function(){$("h1,h2,p").removeClass("top");});02OPTIONtoggleClass()方法用于對(duì)被選元素進(jìn)行添加或刪除類的切換操作。jQuery的toggleClass()方法$("h1,h2,p").toggleClass("top");03OPTION6.3jQuery的CSS操作方法jQuery的css()方法可以用于獲取被選元素的一個(gè)或多個(gè)樣式屬性。01OPTION獲取頁面元素的CSS屬性css("propertyname");jQuery的css()方法可以用于設(shè)置被選元素的一個(gè)樣式屬性。02OPTION設(shè)置頁面元素的一個(gè)CSS屬性css("propertyname","value");jQuery的css()方法也可以用于設(shè)置被選元素的多個(gè)樣式屬性。設(shè)置頁面元素的多個(gè)CSS屬性css({"propertyname":"value","propertyname":"value",……});03OPTION目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0604.html中的導(dǎo)航菜單如圖所示，應(yīng)用JavaScript的onload、onmouseover、onmouseout事件，className、length等屬性，以及getElementById()、getElementsByTagName()、replace()等方法實(shí)現(xiàn)該導(dǎo)航菜單，同時(shí)還要應(yīng)用RegExp對(duì)象創(chuàng)建正則表達(dá)式?！救蝿?wù)描述】圖6-4應(yīng)用onmouseover等事件和className屬性設(shè)計(jì)的橫向?qū)Ш讲藛巫远x函數(shù)menuFix()，當(dāng)網(wǎng)頁加載完成時(shí)，觸發(fā)onload事件，調(diào)用該函數(shù)。聯(lián)合使用getElementById()和getElementsByTagName()方法，獲取指定的列表項(xiàng)。當(dāng)鼠標(biāo)指針指向?qū)Ш讲藛螌?duì)應(yīng)的列表項(xiàng)時(shí)，觸發(fā)onmouseover事件，通過className屬性設(shè)置其樣式。當(dāng)鼠標(biāo)指針離開導(dǎo)航菜單對(duì)應(yīng)的列表項(xiàng)時(shí)，觸發(fā)onmouseout事件，通過className屬性清除其已設(shè)置的樣式?！救蝿?wù)描述】任務(wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0604.html中橫向?qū)Ш讲藛沃饕獞?yīng)用的CSS代碼如表所示?！咎匦?shí)現(xiàn)】序號(hào)程序代碼010203#navli:hoverul{left:auto;}序號(hào)程序代碼040506#navli.sfhoverul{left:auto;}序號(hào)程序代碼01020304050607080910111213<divid="daohang"><ulid="nav"><li><ahref="index.html">首頁</a></li><li><ahref="#">功能手機(jī)</a><ul><li><ahref=""target="_blank">音樂手機(jī)</a></li><li><ahref=""target="_blank">商務(wù)手機(jī)</a></li></ul></li><li><ahref=""target="_blank">手機(jī)配件</a><ul><li><ahref=""target="_blank">耳機(jī)</a></li><li><ahref=""target="_blank">電池</a></li>網(wǎng)頁0604.html中橫向?qū)Ш讲藛螌?duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼14151617181920</ul></li><li><ahref=""target="_blank">服務(wù)政策</a></li><li><ahref=""target="_blank">關(guān)于我們</a></li><li><ahref=""target="_blank">聯(lián)系我們</a></li></ul></div>任務(wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛卧诰W(wǎng)頁0604.html中實(shí)現(xiàn)橫向?qū)Ш讲藛蔚腏avaScript代碼如表所示。序號(hào)程序代碼0102030405060708091011121314<scripttype=text/javascript>functionmenuFix(){varsfEls=document.getElementById("nav").getElementsByTagName("li");for(vari=0;i<sfEls.length;i++){sfEls[i].onmouseover=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls[i].onmouseout=function(){this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script>目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0605.html中的導(dǎo)航菜單如圖所示，當(dāng)鼠標(biāo)指針指向不同的菜單時(shí)，該菜單的背景改變，并自動(dòng)顯示對(duì)應(yīng)的下拉菜單。應(yīng)用jQuery的hover事件和css()方法實(shí)現(xiàn)該導(dǎo)航菜單。【任務(wù)描述】網(wǎng)頁0605.html中的導(dǎo)航菜單當(dāng)鼠標(biāo)指針指向某一個(gè)菜單時(shí)觸發(fā)hover事件，調(diào)用相應(yīng)的函數(shù)，通過其offset()方法獲取匹配元素相對(duì)于網(wǎng)頁文檔的位置，然后通過left屬性獲取匹配元素相對(duì)于網(wǎng)頁文檔水平方向的距離，通過top屬性獲取匹配元素相對(duì)于網(wǎng)頁文檔垂直方向的距離。使用jQuery的css()方法設(shè)置下拉菜單相對(duì)于網(wǎng)頁文檔的位置，同時(shí)顯示下拉菜單。當(dāng)鼠標(biāo)指針離開下拉菜單時(shí)將其隱藏?！救蝿?wù)描述】任務(wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0605.html中導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。【特效實(shí)現(xiàn)】序號(hào)程序代碼010203040506070809101112131415161718.menuSub{position:absolute;width:120px;display:none;float:none;height:auto;top:0px;left:0px}.menuSubh3{text-align:center;line-height:35px;width:119px;background:url(../images/menu_bg.gif)no-repeat0px-70px;float:left;height:35px;color:#b50000;序號(hào)程序代碼192021222324252627282930313233343536margin-left:1px;font-size:14px;cursor:pointer;font-weight:bold;}.menuSubul{border-top:mediumnone;border-bottom:#b500002pxsolid;border-left:#b500002pxsolid;border-right:#b500002pxsolid;width:113px;background:#fff;float:left;height:auto;padding:5px0px;margin-left:1px;}任務(wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛涡蛱?hào)程序代碼010203040506070809101112131415161718192021222324<divclass="contain"><divclass="pagMenu"><divclass="menuMst"><ul><liid="top1_index"class="on"><aid="top1_linkIndex"href="">首頁</a></li><liid="top1_mobile"><aid="top1_linkMobile"href="">手機(jī)</a></li><liid="top1_fitting"><aid="top1_linkFitting"href="">配件</a></li><liid="top1_benefit"><aid="top1_linkBenefit"href="">活動(dòng)</a></li><li><ahref=""target="_blank">行業(yè)定制</a></li></ul></div><divclass="menuSub"><h3id="top1_menuSubTit">活動(dòng)</h3><ul><li><aid="top1_HyperLink1"href="">周五巨獻(xiàn)</a></li><li><aid="top1_HyperLink2"href="">周三瘋搶</a></li><li><aid="top1_HyperLink3"href="">限時(shí)限量搶購</a></li><li><aid="top1_HyperLink4"href="">清倉特惠</a></li><li><aid="top1_HyperLink5"href="">優(yōu)惠套餐</a></li><li><aid="top1_HyperLink6"href="">積分換購</a></li></ul></div></div></div>網(wǎng)頁0605.html中導(dǎo)航菜單對(duì)應(yīng)的HTML代碼如表所示。任務(wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛涡蛱?hào)程序代碼010203040506070809101112<scripttype="text/javascript">$("#top1_benefit").hover(function(){varoffset=$(this).offset();varintLft=offset.left;varintTop=offset.top;$(".menuSub").css({"left":intLft,"top":intTop});$(".menuSub").show();});$(".menuSub").hover(function(){},function(){$(this).hide();});</script>網(wǎng)頁0605.html中實(shí)現(xiàn)導(dǎo)航菜單的JavaScript代碼如表所示。目錄導(dǎo)航任務(wù)6-1應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單任務(wù)6-3應(yīng)用jQuery的bind()和attr()等方法實(shí)現(xiàn)縱向?qū)Ш讲藛稳蝿?wù)6-5應(yīng)用jQuery的hover事件和css()方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-2應(yīng)用jQuery的hover事件和addClass()等方法實(shí)現(xiàn)橫向?qū)Ш讲藛稳蝿?wù)6-4應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛稳蝿?wù)6-7應(yīng)用jQuery的one()和each()等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單任務(wù)6-8應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單任務(wù)6-9應(yīng)用jQuery的show()和hide()等方法設(shè)計(jì)縱向?qū)Ш讲藛稳蝿?wù)6-10應(yīng)用jQuery的slideDown()和slideUp()等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單任務(wù)6-11應(yīng)用jQuery的slideDown()和fadeOut()等方法設(shè)計(jì)下拉菜單任務(wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0606.html中的導(dǎo)航菜單如圖所示，當(dāng)鼠標(biāo)指針指向菜單時(shí)彈出雙列下拉菜單。應(yīng)用jQuery的find()和animate()等方法實(shí)現(xiàn)該導(dǎo)航菜單。【任務(wù)描述】網(wǎng)頁0606.html中的導(dǎo)航菜單為倒數(shù)第3至倒數(shù)第2個(gè)（不含倒數(shù)第1個(gè)）菜單中的匹配元素（樣式類為children的元素）添加類sleft。當(dāng)鼠標(biāo)指針指向菜單時(shí)，為其下拉菜單添加自定義動(dòng)畫，設(shè)置其opacity和height屬性為show，并為菜單添加樣式類navhover。當(dāng)鼠標(biāo)指針離開菜單時(shí)，等待自定義動(dòng)畫結(jié)束后隱藏下拉菜單，并移除菜單的樣式類navhover?！救蝿?wù)描述】任務(wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0606.html中的導(dǎo)航菜單主要應(yīng)用的CSS代碼如表所示。【特效實(shí)現(xiàn)】序號(hào)程序代碼01020304050607080910111213141516#wrap-nav.menuul.children{position:absolute;line-height:normal;width:225px;display:none;background:#fff;top:35px;left:3px;padding:5px0px0px;border-top:0pxsolid#d92640;border-right:2pxsolid#d92640;border-bottom:2pxsolid#d92640;border-left:2pxsolid#d92640;}#wrap-nav.menulia.xiala1{margin-top:5px;序號(hào)程序代碼17181920212223242526272829303132display:inline-block;color:#fff;font-size:14px;text-decoration:none}#wrap-nav.menulia.navhover{background-image:url(images/menubgtu.gif);background-repeat:no-repeat;background-position:left-83px;color:#911531;}#wrap-nav.menuul.sleft{right:6px;left:auto;_right:5px}任務(wù)6-6應(yīng)用jQuery的find()和animate()等方法設(shè)計(jì)橫向?qū)Ш讲藛尉W(wǎng)頁0606.html中導(dǎo)航菜單對(duì)應(yīng)的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920212223<divclass="box"><divid="wrap-nav"><divclass="container"><divclass="outerbox"><divclass="innerboxclearfixmenu"><ulclass="menu"><liclass="spritemenu"><h3><aclass="xiala1"href=""><span>首頁</span></a></h3></li><liclass="spritemenu"><h3><aclass="xiala1"href=""><span>PS教程</