單元7 設(shè)計選項卡類網(wǎng)頁特效

單元7設(shè)計選項卡類網(wǎng)頁特效JavaScript+jQuery網(wǎng)頁特效設(shè)計任務(wù)驅(qū)動教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會設(shè)計選項卡類網(wǎng)頁特效正確定義與訪問JavaScript的數(shù)組對象掌握J(rèn)avaScriptArray對象的主要屬性和方法了解JSON及其正確使用方法教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換網(wǎng)頁0701.html中的選項卡如圖所示。單擊選項卡標(biāo)題能實現(xiàn)手動切換，同時該選項卡還能自動切換。任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換網(wǎng)頁0701.html中的選項卡對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708091011121314151617181920212223<divclass="homepage_prefer"><h2><spanid="imgproduct1"onmouseover="showproductdiv(1);"style="display:none;"><b>本周推薦</b></span><spanid="showproduct1"class="other"onmouseover="productDivStop();"style="display:block;"onmouseout="productDivPlay(1);"><bclass="nonce">本周推薦</b></span><spanid="imgproduct2"onmouseover="showproductdiv(2);"style="display:block;"><b>新鮮貨</b></span><spanid="showproduct2"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(2);"><bclass="nonce">新鮮貨</b></span><spanid="imgproduct3"onmouseover="showproductdiv(3);"style="display:block;"><b>熱賣商品</b></span><spanid="showproduct3"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(3);"><bclass="nonce">熱賣商品</b></span><spanid="imgproduct4"onmouseover="showproductdiv(4);"style="display:block;"><b>新書上架</b></span><spanid="showproduct4"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(4);"><bclass="nonce">新書上架</b></span><divclass="clear"></div></h2><divclass="homepage_prefer_list"id="_i1"onmouseover="productDivStop();"onmouseout="productDivPlay(1);"style="display:block;"><ul>任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換序號程序代碼242526272829303132333435363738394041<li>……</li><li>……</li>……</ul></div><divclass="homepage_prefer_list"id="_i2"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(2);"><ul>……</ul></div><divclass="homepage_prefer_list"id="_i3"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(3);"><ul>……</ul></div><divclass="homepage_prefer_list"id="_i4"onmouseover="productDivStop();"style="display:none;"onmouseout="productDivPlay(4);"><ul>……</ul></div></div>任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換網(wǎng)頁0701.html中實現(xiàn)選項卡切換的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314151617181920<scripttype="text/javascript">function$(id){returndocument.getElementById(id);}//手動切換varplaynum=1;functionshowproductdiv(id){if(id==0){id=playnum;}for(i=1;i<=4;i++){if(i==id){$("showproduct"+id).style.display="block";$("imgproduct"+id).style.display="none";$("_i"+id).style.display="block";}else{$("showproduct"+i).style.display="none";$("imgproduct"+i).style.display="block";$("_i"+i).style.display="none";}}if(playnum==4){playnum=1;}else{playnum++;}任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換序號程序代碼21222324252627282930313233}//自動切換varmyplay;functionproductDivPlay(id){if(id==""){id=0;}else{playnum=id;}myplay=setInterval("showproductdiv(0)",2000);}functionproductDivStop(){clearInterval(myplay);}productDivPlay(0);</script>目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡網(wǎng)頁0702.htm中的橫向選項卡如圖所示，單擊選項卡標(biāo)題可進(jìn)行選項卡的切換。網(wǎng)頁0702.htm中的橫向選項卡對應(yīng)的HTML代碼如表所示。序號程序代碼010203040506070809101112<divid="buyact"class="row790"><divclass="thead"><h2>促銷在進(jìn)行……</h2><ulclass="tab0"><liclass="index"><em>特價寶貝</em></li><li><em>新品上架</em></li><li><em>今日必買</em></li><li><em>創(chuàng)意極品</em></li></ul></div><divclass="tbody"><divclass="block">序號程序代碼13141516171819202122<divclass="tInfo">……</div><divclass="tInfo">……</div><divclass="tInfo">……</div><divclass="tInfo">……</div></div><divclass="none">……</div><divclass="none">……</div><divclass="none">……</div></div></div>任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡網(wǎng)頁0702.htm中實現(xiàn)橫向選項卡的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314151617<scripttype="text/javascript">$(document).ready(function(){tab();});functiontab(){var_obj=$("#buyact").find(".tab0>li");//單擊$(_obj).click(function(){var_ID=$(_obj).index(this);$(_obj).removeClass();$(this).addClass("index");$("#buyact").find(".tbody>div").removeClass().addClass("none");$("#buyact").find(".tbody>div:eq("+_ID+")").removeClass().addClass("block");});}</script>7.1JavaScript的數(shù)組對象數(shù)組類似于變量，但不同之處在于數(shù)組可以把多個值和表達(dá)式放在一個名稱之下。把多個值存放在一個變量中的做法造就了數(shù)組的強(qiáng)大?？纱娣旁贘avaScript數(shù)組中的數(shù)據(jù)的類型和數(shù)量都沒有限制，在腳本中聲明數(shù)組之后，就可以隨時訪問數(shù)組中任何項的任何數(shù)據(jù)。雖然數(shù)組可以保存JavaScript的任何數(shù)據(jù)類型，包括其他數(shù)組，但最常見的做法是，把相類似的數(shù)據(jù)存儲在同一個數(shù)組中，并給它指定一個與數(shù)組項有關(guān)聯(lián)意思的名稱。7.1JavaScript的數(shù)組對象關(guān)鍵字new用來創(chuàng)建數(shù)組對象。下面的代碼定義了一個名為color的數(shù)組對象。01OPTION定義數(shù)組varcolor=newArray();有多種向數(shù)組賦值的方法，可以添加任意多的值，就像可以定義需要的任意多的變量一樣。varcolor=newArray();color[0]="red";color[1]="yellow";color[2]="blue";方法一：varcolor=newArray("red","yellow","blue");方法二：varcolor=["red","yellow","blue"];方法三：對于數(shù)組，還有“關(guān)聯(lián)數(shù)組”這樣一個特別的對象。有時會發(fā)現(xiàn)定義對象如下。varcar=newArray();car['color']='red';car['wheels']=4;car['age']=2;7.1JavaScript的數(shù)組對象通過指定數(shù)組名以及索引號，就可以訪問某個特定的元素。因為數(shù)組下標(biāo)是基于零的，所以第1個元素是[0]，第2個元素是[1]，以此類推。訪問數(shù)組document.write(color[0])如果需要修改已有數(shù)組中的值，只要向指定下標(biāo)號添加一個新值即可。例如：02OPTION輸出的值是：redcolor[0]="green";7.1JavaScript的數(shù)組對象JavaScriptArray對象常用的屬性是length，用于設(shè)置或返回數(shù)組中元素的數(shù)目。JavaScriptArray對象的方法較多，如表所示。JavaScriptArray對象的主要屬性和方法03OPTION方法名稱功能說明concat()連接兩個或更多的數(shù)組，并返回一個新數(shù)組join()將數(shù)組的所有元素組成一個字符串，元素通過指定的分隔符進(jìn)行分隔，如果省略分隔符，則默認(rèn)用逗號作為分隔符pop()刪除并返回數(shù)組的最后一個元素，如果數(shù)組為空，則返回undefinedpush()向數(shù)組的末尾添加一個或更多元素，并返回新的長度reverse()將數(shù)組中元素的順序反序shift()刪除并返回數(shù)組的第1個元素，如果數(shù)組為空，則返回undefined7.1JavaScript的數(shù)組對象方法名稱功能說明slice()從某個已有的數(shù)組返回選定的元素sort()對數(shù)組的元素進(jìn)行排序splice()刪除元素，并向數(shù)組添加新元素toSource()返回該對象的源代碼toString()把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果toLocaleString()把數(shù)組轉(zhuǎn)換為本地數(shù)組，并返回結(jié)果unshift()向數(shù)組的開頭添加一個或更多元素，并返回新的長度valueOf()返回數(shù)組對象的原始值7.2JSON及其使用JavaScript對象表示法（JavaScriptObjectNotation，JSON）是存儲和交換文本信息的數(shù)據(jù)格式，類似于XML，但JSON比XML更小、更快，更易于解析。道格拉斯·克洛克福德（DouglasCrockford）發(fā)明了JSON數(shù)據(jù)格式來存儲數(shù)據(jù)，可以使用原生的JavaScript方法來存儲復(fù)雜的數(shù)據(jù)而不需要進(jìn)行任何額外的轉(zhuǎn)換。JSON是JavaScript中對象的字面量，是對象的表示方法，通過使用JSON，可以減少中間變量，使代碼的結(jié)構(gòu)更加清晰，也更加直觀。7.2JSON及其使用可以用下面的語句聲明一個對象，同時創(chuàng)建屬性。varbook={name:"網(wǎng)頁特效設(shè)計",author:"丁一",publishing:"人民郵電出版社",price:38.8,edition:2}JSON的語法格式是使用“{”和“}”表示一個對象，使用“屬性名稱:屬性值”的格式來創(chuàng)建屬性，多個屬性用“,”分隔。對象屬性還可以是一個對象或者數(shù)組。使用JSON格式的對象創(chuàng)建完成后，就可以用“.”或者索引的形式訪問屬性。JSON的另一個應(yīng)用場景是：當(dāng)一個函數(shù)擁有多個返回值時，在傳統(tǒng)的面向?qū)ο笳Z言中，用戶需要組織一個對象，然后返回，而JavaScript則完全不需要這么麻煩。7.2JSON及其使用在實際的編程中，用戶通常需要遍歷一個JavaScript對象，但用戶事先對對象的內(nèi)容一無所知。怎么做呢？JavaScript提供了for...in形式的語法結(jié)構(gòu)。for(variteminjson){//item為鍵//json[item]為值};這種模式十分有用，例如，在實際的Web應(yīng)用中，對一個頁面元素需要設(shè)置一些屬性，這些屬性是事先不知道的。varstyle={border:"1pxsolid#ccc",color:"blue"};目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡網(wǎng)頁0703.html中的縱向選項卡如圖所示，鼠標(biāo)指針指向選項卡標(biāo)題時自動切換選項卡。【任務(wù)描述】自定義函數(shù)tab_live()實現(xiàn)選項卡的切換，該函數(shù)只有1個參數(shù)，用于傳送鼠標(biāo)指針指向的選項卡位置編號，分別為0、1、2。該函數(shù)通過網(wǎng)頁元素的className屬性設(shè)置樣式類，通過設(shè)置display屬性值為block或none，實現(xiàn)選項卡內(nèi)容的顯示或隱藏?！舅悸诽轿觥咳蝿?wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡網(wǎng)頁0703.html中的縱向選項卡對應(yīng)的HTML代碼如表所示?！咎匦崿F(xiàn)】序號程序代碼010203040506070809101112131415161718192021<divclass="main960box_hr12"></div><divclass="main960"id="liveshow_title"></div><divclass="main960"id="liveshow"><divclass="float_l"id="liveshow_tabs"><divclass="bjoff"onmouseover="tab_live(0)"></div><divclass="shoff"onmouseover="tab_live(1)"></div><divclass="gzon"onmouseover="tab_live(2)"></div></div><divid="liveshowconts1"><ulclass="liveshow_listline_h_26font_s_14"style="display:none;"><li>……</li><li>……</li>……</ul><ulclass="liveshow_listline_h_26font_s_14"style="display:none;">……</ul><ulclass="liveshow_listline_h_26font_s_14"style="display:none;">……</ul><dlclass="book_online">任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡序號程序代碼222324252627282930<dt><spanclass="float_r"><ahref=""target="_blank">更多>></a></span><spanclass="font_w_bd_redfont_s_14">熱點演出</span></dt><ddclass="padding_t10">……</dd></dl></div><divclass="clr"></div></div>網(wǎng)頁0703.html中實現(xiàn)縱向選項卡的JavaScript代碼如表所示。序號程序代碼010203040506070809101112<script>functiontab_live(n){varm_n=document.getElementById("liveshow_tabs").getElementsByTagName("div");varc_n=document.getElementById("liveshowconts1").getElementsByTagName("ul");if(n==0){m_n[0].className="bjon";m_n[1].className="shoff";m_n[2].className="gzoff";c_n[0].style.display="block";c_n[1].style.display="none";c_n[2].style.display="none";}任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡序號程序代碼131415161718192021222324252627282930if(n==1){m_n[0].className="bjoff";m_n[1].className="shon";m_n[2].className="gzoff";c_n[0].style.display="none";c_n[1].style.display="block";c_n[2].style.display="none";}if(n==2){m_n[0].className="bjoff";m_n[1].className="shoff";m_n[2].className="gzon";c_n[0].style.display="none";c_n[1].style.display="none";c_n[2].style.display="block";}}</script>目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡網(wǎng)頁0704.html中的橫向選項卡如圖所示，鼠標(biāo)指針指向選項卡標(biāo)題時實現(xiàn)選項卡的切換。【任務(wù)描述】自定義函數(shù)getObject()，該函數(shù)根據(jù)不同類型瀏覽器的DOM屬性差異調(diào)用合適的方法，返回網(wǎng)頁元素。自定義函數(shù)tab_fun()，該函數(shù)有4個參數(shù)，分別為元素順序、元素總數(shù)、ID標(biāo)識和類名稱。該函數(shù)通過網(wǎng)頁元素的className屬性設(shè)置樣式類，通過設(shè)置display屬性值為block或none，實現(xiàn)選項卡內(nèi)容的顯示或隱藏?！舅悸诽轿觥咳蝿?wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡網(wǎng)頁0704.html中的橫向選項卡主要應(yīng)用的CSS代碼如表所示。【特效實現(xiàn)】序號程序代碼0102030405060708091011121314.tab_ul{background:url(images/main_bg.jpg)no-repeat0px-104px;overflow:hidden;width:772px;position:relative}.tab_ulli{border-right:#8fa9c21pxsolid;display:inline;float:left;cursor:pointer;color:#039;line-height:27px;序號程序代碼1516171819202122232425262728border-bottom:#8fa9c21pxsolid;height:27px;padding:0px18px0px18px;}.tab_ulli.the_2{font-weight:bold;background:#fff;color:#333;border-bottom:#fff1pxsolid;position:relative;}.last_ul{height:301px}任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡網(wǎng)頁0704.html中的橫向選項卡對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708091011121314151617181920212223<divclass="indexright_last"><ulclass="tab_ul"><liclass="the_2"id="tab_b1"onmouseover="tab_fun('1','7','tab_b','the_2')"><ahref="">最新驅(qū)動</a></li><liid="tab_b2"onmouseover="tab_fun('2','7','tab_b','the_2')"><ahref="">硬件驅(qū)動</a></li><liid="tab_b3"onmouseover="tab_fun('3','7','tab_b','the_2')"><ahref="">筆記本驅(qū)動</a></li><liid="tab_b4"onmouseover="tab_fun('4','7','tab_b','the_2')"><ahref="">聲卡驅(qū)動</a></li><liid="tab_b5"onmouseover="tab_fun('5','7','tab_b','the_2')"><ahref="">辦公驅(qū)動</a></li><liid="tab_b6"onmouseover="tab_fun('6','7','tab_b','the_2')"><ahref="">數(shù)碼驅(qū)動</a></li><liid="tab_b7"onmouseover="tab_fun('7','7','tab_b','the_2')"><ahref="">手機(jī)驅(qū)動</a></li></ul><divclass="last_ul"id="c_tab_b1"style="display:block"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b2"style="display:none"><ulclass="last_ul1">……</ul>任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡序號程序代碼2425262728293031323334353637383940414243444546<ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b3"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b4"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b5"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b6"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div><divclass="last_ul"id="c_tab_b7"style="display:none"><ulclass="last_ul1">……</ul><ulclass="last_ul1">……</ul></div></div>任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡序號程序代碼010203040506070809101112131415161718192021222324252627<scripttype="text/javascript">functiongetObject(objectId){if(document.getElementById&&document.getElementById(objectId)){//W3CDOMreturndocument.getElementById(objectId);}elseif(document.all&&document.all(objectId)){//MSIE4DOMreturndocument.all(objectId);}elseif(document.layers&&document.layers[objectId]){//NN4DOMreturndocument.layers[objectId];}else{returnfalse;}}//通用TAB切換函數(shù)（元素順序，元素總數(shù)，ID標(biāo)識，類名稱）functiontab_fun(ord,num,cname,nowstyle){num++;for(i=1;i<num;i++){if(ord==i){getObject(cname+i).className=nowstyle;getObject('c_'+cname+i).style.display="block";}else{getObject(cname+i).className="";getObject('c_'+cname+i).style.display="none";}}}</script>網(wǎng)頁0704.html中實現(xiàn)橫向選項卡對應(yīng)的JavaScript代碼如表所示。目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡網(wǎng)頁0705.html中的橫向選項卡如圖所示，單擊選項卡標(biāo)題即可切換選項卡?！救蝿?wù)描述】仿照jQuery的attr()方法自定義函數(shù)attr()，該函數(shù)用于獲取和設(shè)置網(wǎng)頁元素屬性的值。調(diào)用自定義函數(shù)attr()分別獲取titTag、conTag、maxNum和curNum等屬性的值。通過設(shè)置網(wǎng)頁元素的className屬性的值，控制選項卡的顯示或隱藏，同時設(shè)置選項卡標(biāo)題的背景。調(diào)用自定義函數(shù)attr()，設(shè)置當(dāng)前被選中選項卡的屬性，即顯示被選中選項卡對應(yīng)的網(wǎng)頁內(nèi)容。【思路探析】任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡網(wǎng)頁0705.html中的橫向選項卡主要應(yīng)用的CSS代碼如表所示?！咎匦崿F(xiàn)】序號程序代碼0102030405060708091011121314151617181920212223.shopDesc.tit{width:760px;height:25px;float:left;background:url(../images/line_grp.gif)repeat-x0px24px;}.shopDesc.tith3{width:100px;height:25px;float:left;line-height:25px;font-size:12px;text-align:center;margin-right:5px;cursor:default;}.shopDesc.tith3.on{color:#535353;background:url(../images/shop_v.gif)no-repeat-0px-100px;}.shopDesc.tith3.of{序號程序代碼24252627282930313233343536373839404142434445464748color:#464646;background:url(../images/shop_v.gif)no-repeat-0px-125px;font-weight:normal;}.shopDesc.con{width:738px;height:auto;float:left;padding:10px;border-top:1pxnone#cdcdcd;font-size:12px;border-right:1pxsolid#cdcdcd;border-bottom:1pxsolid#cdcdcd;border-left:1pxsolid#cdcdcd;}.shopDesc.con.of{display:none;}.shopDesc.con.on{width:708px;height:auto;float:left;padding-left:20px;}任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡網(wǎng)頁0705.html中橫向選項卡對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708091011121314151617181920212223<divclass="fullCell"><divclass="mstDesc"><h1style="padding:10px;">蘋果iPhoneXS圖賞</h1><divid="gdsDescInfos"class="shopDesc"titTag="tab"conTag="tbl"maxNum="6"curNum="1"><divclass="tit"><h3id="tab1"class="on"onclick="switchtab('gdsDescInfos',1);">外觀效果圖1</h3><h3id="tab2"class="of"onclick="switchtab('gdsDescInfos',2);">外觀效果圖2</h3><h3id="tab3"class="of"onclick="switchtab('gdsDescInfos',3);">外觀效果圖3</h3><h3id="tab4"class="of"onclick="switchtab('gdsDescInfos',4);">外觀效果圖4</h3><h3id="tab5"class="of"onclick="switchtab('gdsDescInfos',5);">外觀效果圖5</h3></div><divclass="con"><divid="tbl1"class="on"style="padding:0px;width:758px;"><imgheight="460"alt=""width="700"src="images/070501.jpg"/></div><divid="tbl2"class="of"><imgheight="460"alt=""width="700"src="images/070502.jpg"/></div><divid="tbl3"class="of"><imgheight="460"alt=""width="700"src="images/070503.jpg"/></div><divid="tbl4"class="of"><imgheight="460"alt=""width="700"src="images/070504.jpg"/>任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡序號程序代碼2425262728293031</div><divid="tbl5"class="of"><imgheight="460"alt=""width="700"src="images/070505.jpg"/></div></div></div></div></div>網(wǎng)頁0705.html中實現(xiàn)橫向選項卡的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314<scripttype="text/javascript">functionid(name){returndocument.getElementById(name);};//獲取和設(shè)置網(wǎng)頁元素屬性的值functionattr(elem,name,value){if(!name||name.constructor!=String)return‘’;name={'for':'htmlFor','class':'className'}[name]||name;if(typeof(value)!='undefined'){elem[name]=value;if(elem.setAttribute)elem.setAttribute(name,value);}elseif(value==‘’)elem.removeAttribute(name);returnelem[name]||elem.getAttribute(name)||'';};任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡序號程序代碼15161718192021222324252627282930313233343536373839functionswitchtab(strObjName,intClkNum){varobjName=id(strObjName);if(!objName)returnfalse;varstrTitTag=attr(objName,"titTag");varstrConTag=attr(objName,"conTag");varintMaxNum=parseInt(attr(objName,"maxNum"));varintCurNum=parseInt(attr(objName,"curNum"));if(intClkNum==intCurNum)returnfalse;varobjTit,objCon;for(vari=1;i<=intMaxNum;i++){try{objTit=id(strTitTag+i.toString());objCon=id(strConTag+i.toString());if(i==intClkNum){objTit.className="on";objCon.className="on";}else{objTit.className="of";objCon.className="of";};}catch(e){}};attr(objName,"curNum",intClkNum);};</script>目錄導(dǎo)航任務(wù)7-1應(yīng)用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換任務(wù)7-3應(yīng)用DOM的className和style等屬性設(shè)計縱向選項卡任務(wù)7-5應(yīng)用仿jQuery的attr()方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向選項

卡與圖文滾動特效任務(wù)7-2應(yīng)用jQuery的index()和find()等方法實現(xiàn)橫向選項卡任務(wù)7-4應(yīng)用DOM的className和style等屬性設(shè)計橫向選項卡任務(wù)7-7應(yīng)用DOM的getElementById和className等屬性設(shè)計橫向選項卡任務(wù)7-8應(yīng)用jQuery的mouseover()和show()等方法設(shè)計橫向選項卡任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向

選項卡與圖文滾動特效網(wǎng)頁0706.html中的選項卡如圖所示，當(dāng)鼠標(biāo)指針指向選項卡標(biāo)題時可以切換選項卡，單擊選項卡標(biāo)題下方左側(cè)的按鈕時可以向左滾動下方圖文，單擊右側(cè)的按鈕可以向右滾動下方的圖文?！救蝿?wù)描述】自定義函數(shù)upMove()用于實現(xiàn)向左滾動圖文內(nèi)容，downMove()用于實現(xiàn)向右滾動圖文內(nèi)容，自定義函數(shù)changeTab()用于實現(xiàn)切換選項卡。設(shè)置項目列表區(qū)域（即圖文滾動區(qū)域）的寬度為列表項的數(shù)量乘以193。應(yīng)用jQuery的animate()方法自定義動畫，應(yīng)用scrollLeft()方法設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移。應(yīng)用JavaScript的getElementById()和getElementsByTagName()方法獲取指定的網(wǎng)頁元素。應(yīng)用JavaScript的push()方法將<div>元素添加到數(shù)組中。當(dāng)鼠標(biāo)指針指向選項卡標(biāo)題時，通過className屬性設(shè)置該選項卡標(biāo)題的樣式類，通過設(shè)置display屬性值為block或none，實現(xiàn)選項卡內(nèi)容的顯示或隱藏。【思路探析】任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向

選項卡與圖文滾動特效網(wǎng)頁0706.html中選項卡主要應(yīng)用的CSS代碼如表所示?！咎匦崿F(xiàn)】序號程序代碼010203040506070809.m2yw_piclistulli{background:url(images/m2libg.jpg)no-repeatscrollcentertoptransparent;float:left;height:150px;margin-right:18px;padding:1px1px0;text-align:center;width:173px;}序號程序代碼101112131415161718.m2yw_piclistulliimg{display:block;margin-bottom:8px;background:#f93;height:116px;width:173px;line-height:116px;color:#fff;}網(wǎng)頁0706.html中選項卡及圖文內(nèi)容對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708<div><divclass="m2yw_right"><divclass="m2yw_tab"><ulid="tab2"><liclass="m2yw_cutli"onmousemove="changeTab(2,1)">網(wǎng)頁模板</li><lionmousemove="changeTab(2,2)">平面設(shè)計</li><lionmousemove="changeTab(2,3)">網(wǎng)頁特效</li><lionmousemove="changeTab(2,4)">酷站欣賞</li>任務(wù)7-6應(yīng)用JavaScript的push()和jQuery的animate()等方法設(shè)計橫向

選項卡與圖文滾動特效序號程序代碼0910111213141516171819202122232425262728293031323334<lionmousemove="changeTab(2,5)">動畫酷站</li><lionmousemove="changeTab(2,6)">網(wǎng)頁模板</li><lionmousemove="changeTab(2,7)">酷站欣賞</li></ul></div><divid="tablist2"><divclass="m2yw_pic"><divonclick="upMove(this);returnfalse"class="m2yw_btnl"><imgwidth="16"height="114"src="images/m2btn3.jpg"/></div><divclass="m2yw_piclist"><ulclass="m2yw_posul"><li>……</li>