單元4設(shè)計(jì)圖片類網(wǎng)頁特效JavaScript+jQuery網(wǎng)頁特效設(shè)計(jì)任務(wù)驅(qū)動教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會設(shè)計(jì)圖片類網(wǎng)頁特效學(xué)會正確創(chuàng)建和訪問JavaScript對象熟悉JavaScript對象的屬性和方法熟練使用jQuery文檔的操作相關(guān)方法，包括獲得與設(shè)置頁面元素的內(nèi)容、獲取與設(shè)置頁面元素的屬性值、添加頁面元素和刪除元素等了解JavaScript的原型對象教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換在網(wǎng)頁0401.html中，JavaScript實(shí)現(xiàn)的縱向焦點(diǎn)圖片輪換效果如圖所示，該焦點(diǎn)圖片每隔一段時間自動進(jìn)行切換，鼠標(biāo)指針指向?qū)Ш絽^(qū)域也能實(shí)現(xiàn)切換，焦點(diǎn)圖顯示時具有濾鏡效果。任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換在網(wǎng)頁0401.html中，JavaScript實(shí)現(xiàn)的縱向焦點(diǎn)圖片輪換效果對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708091011121314151617<divid="nab"><tableid="pictable"style="display:none"><tbody><tr><td><imgsrc="images/亞丁.jpg"border="0"/></td><td>極致美景中國七大秋色斑斕地</td><td>#</td></tr><tr><td><imgsrc="images/云南大理.jpg"border="0"/></td><td>暢游大理體味民族風(fēng)情</td><td>#</td></tr><tr><td><imgsrc="images/桂林初冬.jpg"border="0"/></td><td>桂林初冬濃妝淡抹最佳處</td><td>/</td>任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換序號程序代碼1819202122232425262728293031323334353637383940</tr><tr><td><imgsrc="images/新疆.jpg"border="0"/></td><td>新疆庫爾勒：鐵關(guān)西天涯極目少行客</td><td>#</td></tr><tr><td><imgsrc="images/興安靈渠.jpg"border="0"/></td><td>歷史遺產(chǎn)：興安靈渠</td><td>#</td></tr><tr><td><imgsrc="images/內(nèi)蒙古.jpg"border="0"/></td><td>神秘美麗的內(nèi)蒙古草原</td><td>#</td></tr><tr><td><imgsrc="images/陜西.jpg"width="404"height="327"border="0"/></td><td>回歸自然感受另類風(fēng)情</td><td>#</td></tr></tbody></table><divclass="div_xixi">……</div></div>任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換在網(wǎng)頁0401.html中實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換效果的主要對應(yīng)的CSS代碼如表所示。序號程序代碼0102030405060708091011121314151617.div_jimg#a_jimg{display:block;width:405px;height:267px}.div_jimg#bigimg{margin:0px;width:403px;height:265px;border:1pxsolid#fd8383;padding:0px;}.div_jimg.ul_jimg{display:block;right:0px;margin:1px;width:225px;list-style-type:none;position:absolute;任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換序號程序代碼1819202122232425262728293031323334top:0px;height:267px;padding:0px;background:url(images/bg_j04.jpg)repeat-yrighttop;}.div_jimg.ul_jimga{position:relative}.div_jimg.ul_jimg.on{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_j05.png’,sizingMethod='scale’);width:225px;color:#fff;text-indent:43px;position:static;}.div_jimg.ul_jimg.ona{font-weight:bold;color:#fff}任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換在網(wǎng)頁0401.html中實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換效果對應(yīng)的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314151617181920<scriptlanguage="javascript"type="text/javascript"><!--window.onload=function(){playit();}varcurrslid=0;varslidint;varpicarry={};varlnkarry={};varttlarry={};vart=document.getElementById("pictable");varnum=t.rows.length;for(vari=0;i<num;i++){try{picarry[i]=t.rows[i].cells[0].childNodes[0].src;ttlarry[i]=t.rows[i].cells[1].innerHTML;lnkarry[i]=t.rows[i].cells[2].innerHTML;}catch(e){序號程序代碼2122232425262728293031323334353637383940}}functionplayit(){slidint=setTimeout(playnext,2500);}functionplaynext(){if(currslid==6){currslid=0;}else{currslid++;};setfoc(currslid);playnext();}functionsetfoc(id){document.getElementById("bigimg").src=picarry[id];任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換序號程序代碼4142434445464748495051525354555657585960document.getElementById("a_jimg").href=lnkarry[id];if(id==4){document.getElementById("a_jimg").style.background='url('+picarry[0]+')’}else{document.getElementById("a_jimg").style.background='url('+picarry[id+1]+')’}currslid=id;for(i=0;i<7;i++){document.getElementById("li_jimg"+i).className="li_jimg";};document.getElementById("li_jimg"+id).className="li_jimgon";varborserInfo=navigator.userAgent.toLowerCase();//判斷當(dāng)前用戶所使用的瀏覽器的類型if(/msie/.test(borserInfo)){document.getElementById("bigimg").style.visibility="hidden";document.getElementById("bigimg").filters[0].Apply();document.getElementById("bigimg").filters[0].transition=23;if(document.getElementById("bigimg").style.visibility=="visible"){任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換序號程序代碼6162636465666768697071727374757677787980document.getElementById("bigimg").style.visibility="hidden";}else{document.getElementById("bigimg").style.visibility="visible";}document.getElementById("bigimg").filters[0].Play();}stopit();}functionstopit(){clearTimeout(slidint);}document.write("<divclass='div_jimg’>”+"<aclass='a_jimg'id='a_jimg'href='"+lnkarry[0]+"'title=''style='background:url("+picarry[1]+")'target='_blank’>”+"<imgid='bigimg'style='filter:RevealTrans(duration='1',transition='23’);visibility:visible;'alt=''src='"+picarry[0]任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換序號程序代碼81828384858687888990919293949596979899100+"'\/><\/a>"+"<ulclass='ul_jimg’>”+"<liclass='li_jimgon'id='li_jimg0'onmouseover='setfoc(0)'onmouseout='playit()'>"+"<ahref='"+lnkarry[0]+"'target='_blank'class='img'>"+ttlarry[0]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg1'onmouseover='setfoc(1)'onmouseout='playit()’>”+"<ahref='"+lnkarry[1]+"'target='_blank'class='img'>"+ttlarry[1]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg2'onmouseover='setfoc(2)'onmouseout='playit()’>”+"<ahref='"+lnkarry[2]+"'target='_blank'class='img'>"+ttlarry[2]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg3'onmouseover='setfoc(3)'onmouseout='playit()’>”+"<ahref='"+lnkarry[3]+"'target='_blank'class='img'>"+ttlarry[3]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg4'onmouseover='setfoc(4)'onmouseout='playit()’>”+"<ahref='"+lnkarry[4]+"'target='_blank'class='img'>"+ttlarry[4]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg5'onmouseover='setfoc(5)'onmouseout='playit()’>”+"<ahref='"+lnkarry[5]+"'target='_blank'class='img'>"+ttlarry[5]+"<\/a><\/li>"+"<liclass='li_jimg'id='li_jimg6'onmouseover='setfoc(6)'onmouseout='playit()’>”+"<ahref='"+lnkarry[6]+"'target='_blank'class='img'>"+ttlarry[6]+"<\/a><\/li>"+"<\/ul>"+"<\/div>");--></script>目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換網(wǎng)頁0402.html中帶左右按鈕控制焦點(diǎn)圖片切換的外觀效果如圖所示。網(wǎng)頁0402.html中帶左右按鈕控制焦點(diǎn)圖片切換對應(yīng)的HTML代碼如表所示。序號程序代碼0102030405060708091011<divclass="wrapper"><divid="focus"><ul><li><ahref=""target="_blank"><imgsrc="images/01.jpg"alt=""/></a></li><li><ahref=""target="_blank"><imgsrc="images/02.jpg"alt=""/></a></li><li><ahref=""target="_blank"><imgsrc="images/03.jpg"alt=""/></a></li><li><ahref=""target="_blank"><imgsrc="images/04.jpg"alt=""/></a></li><li><ahref=""target="_blank"><imgsrc="images/05.jpg"alt=""/></a></li></ul></div></div>任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換網(wǎng)頁0402.html中主要應(yīng)用的CSS代碼如表所示。序號程序代碼010203040506070809101112131415161718192021222324#focusullidiv{position:absolute;overflow:hidden;}#focus.btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}#focus.btn{position:absolute;width:780px;height:10px;padding:5px10px;right:0;bottom:0;text-align:right;}#focus.pre{left:0;}序號程序代碼252627282930313233343536373839404142434445464748#focus.btnspan{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}#focus.preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.bmp)no-repeat00;cursor:pointer;}#focus.next{right:0;background-position:righttop;}任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換jQuery實(shí)現(xiàn)的帶左右按鈕控制焦點(diǎn)圖片切換對應(yīng)的JavaScript代碼如表所示。序號程序代碼0102030405060708091011121314151617181920<scripttype="text/javascript">$(function(){varsWidth=$("#focus").width();//獲取焦點(diǎn)圖的寬度（顯示面積）varlen=$("#focusulli").length;//獲取焦點(diǎn)圖個數(shù)varindex=0;varpicTimer;//以下代碼添加數(shù)字按鈕和按鈕后的半透明條，還有上一頁、下一頁兩個按鈕varbtn="<divclass='btnBg'></div><divclass='btn'>";for(vari=0;i<len;i++){btn+="<span></span>";}btn+="</div><divclass='preNextpre'></div><divclass='preNextnext'></div>";$("#focus").append(btn);$("#focus.btnBg").css("opacity",0.5);//為小按鈕添加鼠標(biāo)指針滑入事件，以顯示相應(yīng)的內(nèi)容$("#focus.btnspan").css("opacity",0.4).mouseover(function(){index=$("#focus.btnspan").index(this);showPics(index);任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換序號程序代碼2122232425262728293031323334353637383940}).eq(0).trigger("mouseover");//上一頁、下一頁按鈕的透明度處理$("#focus.preNext").css("opacity",0.2).hover(function(){$(this).stop(true,false).animate({"opacity":"0.5"},300);},function(){$(this).stop(true,false).animate({"opacity":"0.2"},300);});//上一頁按鈕$("#focus.pre").click(function(){index-=1;if(index==-1){index=len-1;}showPics(index);});//下一頁按鈕$("#focus.next").click(function(){index+=1;if(index==len){index=0;}任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換序號程序代碼4142434445464748495051525354555657585960showPics(index);});//圖片為左右滾動，即所有<li>元素都是在同一排向左浮動，所以這里需要計(jì)算出外圍<ul>元素的寬度$("#focusul").css("width",sWidth*(len));//鼠標(biāo)指針滑上焦點(diǎn)圖時停止自動播放，滑出時開始自動播放$("#focus").hover(function(){clearInterval(picTimer);},function(){picTimer=setInterval(function(){showPics(index);index++;if(index==len){index=0;}},4000);//此4000代表自動播放的間隔，單位為毫秒}).trigger("mouseleave");//顯示圖片函數(shù)，根據(jù)接收的index值顯示相應(yīng)的內(nèi)容functionshowPics(index){//普通切換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換序號程序代碼616263646566676869varnowLeft=-index*sWidth;//根據(jù)index值計(jì)算<ul>元素的left值//使用animate()方法調(diào)整<ul>元素滾動到計(jì)算出的position$("#focusul").stop(true,false).animate({"left":nowLeft},300);//為當(dāng)前的按鈕切換到選中的效果$("#focus.btnspan").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);}});</script>4.1JavaScript的對象JavaScript是一種基于對象的腳本語言，但并不完全支持面向?qū)ο蟮某绦蛟O(shè)計(jì)方法，JavaScript不具有繼承性、封裝性等面向?qū)ο蟮幕咎匦浴avaScript支持對象類型以及根據(jù)這些對象產(chǎn)生的實(shí)例，還支持開發(fā)對象的可重用性。JavaScript中的字符串、數(shù)值、數(shù)組、日期、函數(shù)都是對象，對象是擁有屬性和方法的特殊數(shù)據(jù)類型。JavaScript提供多個內(nèi)建對象，如String、Date、Array等。JavaScript也允許用戶自定義對象。4.1JavaScript的對象在JavaScript中，對象擁有屬性和方法。當(dāng)聲明一個JavaScript變量時，例如：01OPTIONJavaScript對象的屬性和方法varstr="Hello";實(shí)際上已經(jīng)創(chuàng)建了一個JavaScript字符串對象，字符串對象擁有內(nèi)建的屬性length。對于上面的字符串來說，length的值是5。字符串對象同時擁有若干內(nèi)建的方法，例如：str.indexOf()str.replace()str.search()在面向?qū)ο蟮恼Z言中，屬性和方法常被稱為對象的成員。屬性是與對象相關(guān)的值，方法是能夠在對象上執(zhí)行的動作。4.1JavaScript的對象JavaScript的屬性是由鍵值對組成的，即屬性的名稱和屬性的值。屬性的名稱是一個字符串，而值可以為任意的JavaScript對象（JavaScript中的一切皆為對象，包括函數(shù)）。JavaScript的對象可以由花括號{}包裹，在括號內(nèi)部，對象的屬性以名稱和值對的形式（name:value）來定義，多個屬性用逗號分隔。varbook={name:"網(wǎng)頁特效設(shè)計(jì)",price:38.8,edition:2};通過JavaScript，用戶能夠定義并創(chuàng)建自己的對象。創(chuàng)建新JavaScript對象有很多不同的方法，并且可以向已存在的對象添加屬性和方法。創(chuàng)建RegExp對象的修飾符02OPTION4.1JavaScript的對象（1）直接使用鍵值對的形式創(chuàng)建對象（2）通過賦值方式定義并創(chuàng)建對象的實(shí)例通過new操作符構(gòu)造一個新的對象，然后動態(tài)添加屬性，從無到有地構(gòu)筑一個對象。varbook={name:"網(wǎng)頁特效設(shè)計(jì)",author:"丁一",publishing:"人民郵電出版社",price:38.8,edition:2}varbook=newObject();="網(wǎng)頁特效設(shè)計(jì)"book.author="丁一"book.publishing="人民郵電出版社"book.price=38.8book.edition=2document.write("書名："++"<br/>");document.write("作者："+book.author+"<br/>");document.write("出版社："+book.publishing+"<br/>");document.write("價格："+book.price);4.1JavaScript的對象（3）定義對象的原型，然后使用new操作符來構(gòu)筑新的對象首先創(chuàng)建對象構(gòu)造器。functionbook(name,author,publishing,price,edition){=name;this.author=author;this.publishing=publishing;this.price=price;this.edition=edition}4.1JavaScript的對象在JavaScript中引用對象時，根據(jù)對象的包含關(guān)系，使用成員引用操作符“.”一層一層地引用對象。當(dāng)引用較低層次的對象時，一般有兩種方式：使用對象索引或使用對象名稱（或ID）。對于不同的對象，通常還有一些特殊的引用方法，例如，要引用表單對象中包含的對象，可以使用elements數(shù)組；引用當(dāng)前對象可以使用this。要獲取網(wǎng)頁文檔中圖片的數(shù)量，可以使用“document.images.length”的形式。要設(shè)置圖片的alt屬性，可以使用“document.images[0].alt="圖片1";”的形式。要設(shè)置圖片的src屬性，可以使用“document.images[0].src=document.images[1].src;”的形式。訪問JavaScript的對象03OPTION屬性是與對象相關(guān)的值。訪問對象屬性的語法格式：①對象名.屬性名稱；②對象名["屬性名稱"]（1）訪問對象的屬性（2）訪問對象的方法方法是能夠在對象上執(zhí)行的動作。可以通過下面的語法調(diào)用方法：對象名.方法名稱(參數(shù)表)。4.1JavaScript的對象原型（prototype）是JavaScript特有的一個概念，通過使用原型，JavaScript可以建立其傳統(tǒng)面向?qū)ο笳Z言中的繼承，從而體現(xiàn)對象的層次關(guān)系。JavaScript本身是基于原型的，每個對象都有一個prototype的屬性，這個prototype本身也是一個對象，因此它本身也可以有自己的原型，這樣就構(gòu)成了一個鏈結(jié)構(gòu)。訪問一個屬性時，解析器需要從下向上遍歷這個鏈結(jié)構(gòu)，直到遇到該屬性，并返回屬性對應(yīng)的值，或者遇到原型為null的對象[JavaScript的對象（Object）的prototype屬性即為null]，如果此對象仍沒有該屬性，則返回undefined。JavaScript的原型對象04OPTION4.2jQuery文檔的操作方法以下3個jQuery方法用于DOM操作。獲得與設(shè)置頁面元素的內(nèi)容01OPTIONSupportingtexthere01text()用于設(shè)置或獲取所選元素的文本內(nèi)容。02html()用于設(shè)置或獲取所選元素的內(nèi)容（包括HTML標(biāo)記）。03val()用于設(shè)置或返回表單字段的值。4.2jQuery文檔的操作方法以下代碼用于設(shè)置頁面元素的內(nèi)容。$("#btn1").click(function(){$("#test1").text("jQuery");});$("#btn2").click(function(){$("#test2").html("<b>jQuery</b>");});$("#btn3").click(function(){$("#test3").val("jQuery");});以下代碼用于獲得頁面元素的內(nèi)容。$("#btn1").click(function(){alert("Text:"+$("#test1").text());});$("#btn2").click(function(){alert("HTML:"+$("#test2").html());});$("#btn3").click(function(){alert("Value:"+$("#test3").val());});4.2jQuery文檔的操作方法jQuery的attr()方法可以用于獲取頁面元素的屬性值，也可以設(shè)置或改變頁面元素的屬性值。以下代碼用于設(shè)置頁面元素的屬性值。獲取與設(shè)置頁面元素的屬性值02OPTION$("btn").click(function(){$("#demo").attr("href","/");});以下代碼用于獲取頁面元素的屬性值。$("button").click(function(){alert($("#demo").attr("href"));});以下代碼同時設(shè)置頁面元素的href和title屬性。$("button").click(function(){$("#demo").attr({"href":"/","title":"瑞星安全網(wǎng)址導(dǎo)航"});});4.2jQuery文檔的操作方法添加頁面元素03OPTIONjQuery的append()方法用于在被選元素的結(jié)尾插入內(nèi)容。（1）jQuery的append()方法（2）jQuery的prepend()方法jQuery的prepend()方法用于在被選元素的開頭插入內(nèi)容。$("#demo").append("A");$("#demo").prepend("B");通過append()和prepend()方法可以添加多個新元素，能夠通過參數(shù)接收無限數(shù)量的新元素，這些新元素可以通過text/HTML、jQuery或者JavaScript/DOM來創(chuàng)建，然后通過append()方法或prepend()方法把這些新元素追加到文本中。4.2jQuery文檔的操作方法jQuery的after()方法用于在被選元素之后插入內(nèi)容。（3）jQuery的after()方法（4）jQuery的before()方法jQuery的before()方法用于在被選元素之前插入內(nèi)容。$("#demo").after("A");$("demo").before("B");通過after()和before()方法可以添加多個新元素，并能夠通過參數(shù)接收無限數(shù)量的新元素，這些新元素可以通過text/HTML、jQuery或者JavaScript/DOM來創(chuàng)建，然后我們可通過after()方法或者before()方法把這些新元素插到文本中。4.2jQuery文檔的操作方法刪除元素jQuery的remove()方法用于刪除被選元素及其子元素。（1）jQuery的remove()方法（2）jQuery的empty()方法jQuery的empty()方法用于刪除被選元素的子元素。$("#demo").remove();$("#demo").empty();remove()方法也可接受一個參數(shù)，允許對被刪元素進(jìn)行過濾。該參數(shù)可以是任何jQuery選擇器的語法。04OPTION目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸網(wǎng)頁中圖片的初始尺寸可能偏大或者偏小，不符合網(wǎng)頁中圖片的要求，這就需要對網(wǎng)頁中的圖片尺寸進(jìn)行有效控制，使圖片尺寸符合網(wǎng)頁設(shè)計(jì)的要求。【任務(wù)描述】【思路探析】將圖片的寬度和高度乘以一個小于1的系數(shù)，達(dá)到控制圖片尺寸的目的，該系數(shù)取maxWidth/image.width和maxHeight/image.height兩個比值中的較小值。【特效實(shí)現(xiàn)】序號程序代碼0102030405060708091011121314<script>functiondownImage(imgD,maxWidth,maxHeight){varimage=newImage();image.src=imgD.src;if(image.width>0&&image.height>0){varrate=(maxWidth/image.width<maxHeight/image.height)?maxWidth/image.width:maxHeight/image.height;if(rate<=1){imgD.width=image.width*rate;imgD.height=image.height*rate;}}}</script>目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸限制網(wǎng)頁中圖片的尺寸，將鼠標(biāo)指針置于網(wǎng)頁中的圖片上，轉(zhuǎn)動鼠標(biāo)滾輪時縮放圖片。【任務(wù)描述】【思路探析】根據(jù)鼠標(biāo)滾輪滾動的程度計(jì)算圖片縮放比例，通過設(shè)置圖片的樣式屬性zoom的值改變圖片大小。【特效實(shí)現(xiàn)】序號程序代碼01020304050607080910<scriptlanguage="JavaScript"type="text/javascript"><!--functionbbimg(obj){varzoom=parseInt(obj.style.zoom,10)||100;zoom+=event.wheelDelta/12;if(zoom>0)obj.style.zoom=zoom+'%’;returnfalse;}//--></script>任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸控制網(wǎng)頁中圖片的尺寸以及滑動鼠標(biāo)滾輪時調(diào)用函數(shù)bbimg()的代碼如表所示。序號程序代碼01020304<pstyle="line-height:2"align="center"><imgonload="javascript:if(this.width>500)this.style.width=420;"onmousewheel="returnbbimg(this)"src="images/01.jpg"border="0"/></p>表中的代碼解釋如下。代碼“onload="javascript:if(this.width>500)this.style.width=420"”表示加載網(wǎng)頁文檔時觸發(fā)事件onload，執(zhí)行JavaScript代碼：if(this.width>500)this.width=420，即執(zhí)行if語句，當(dāng)圖片的寬度大于500時，設(shè)置該圖片的寬度為420。代碼“onmousewheel="returnbbimg(event,this)"”表示在圖片位置滾動滾輪時觸發(fā)事件onmousewheel，執(zhí)行JavaScript代碼：returnbbimg(this)，即調(diào)用自定義函數(shù)bbimg，縮放圖片大小。目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動實(shí)現(xiàn)網(wǎng)頁0405.html中圖片連續(xù)向上滾動的效果，其外觀效果如圖所示。【任務(wù)描述】【思路探析】按一定的時間間隔調(diào)用函數(shù)marquee()。函數(shù)marquee()不斷改變頁面元素scroll_logo2的scrollTop屬性值，從而實(shí)現(xiàn)圖片連續(xù)向上滾動的效果。任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動【特效實(shí)現(xiàn)】序號程序代碼0102030405060708091011121314<divclass="links"><divstyle="float:left;"><h3>合作媒體</h3></div><divid="scroll_logo2"><divid="pic_box"><ahref="#"><imgsrc="images/sina.jpg"/></a><br/><ahref="#"><imgsrc="images/taobao.gif"/></a><br/><ahref="#"><imgsrc="images/pchome.gif"/></a><br/><ahref="#"><imgsrc="images/it168.gif"/></a><br/><ahref="#"><imgsrc="images/itcom.gif"/></a><br/><ahref="#"><imgsrc="images/163.jpg"/></a><br/></div><divid="pic_box_b"></div></div></div>在網(wǎng)頁0405.html中圖片連續(xù)向上滾動效果對應(yīng)的HTML代碼如表所示。任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動序號程序代碼010203040506070809101112131415161718<scriptlanguage="javascript"type="text/javascript">varspeed=30;pic_box_b.innerHTML=pic_box.innerHTML;functionmarquee(){if(pic_box_b.offsetTop-scroll_logo2.scrollTop<=0){scroll_logo2.scrollTop-=pic_box.offsetHeight;}else{scroll_logo2.scrollTop++;}}varmyMar=setInterval(marquee,speed);scroll_logo2.onmouseover=function(){clearInterval(myMar);}scroll_logo2.onmouseout=function(){myMar=setInterval(marquee,speed)}</script>實(shí)現(xiàn)圖片連續(xù)向上滾動效果的JavaScript代碼如表所示。目錄導(dǎo)航任務(wù)4-1JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換任務(wù)4-3JavaScript實(shí)現(xiàn)控制網(wǎng)頁中的圖片尺寸任務(wù)4-5JavaScript實(shí)現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-2jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換任務(wù)4-4JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動鼠標(biāo)滾輪調(diào)整圖片尺寸任務(wù)4-7JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換任務(wù)4-8JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動的橫向焦點(diǎn)圖輪換任務(wù)4-9jQuery實(shí)現(xiàn)圖片縱向移動的焦點(diǎn)圖片輪換任務(wù)4-10jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換任務(wù)4-11jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時預(yù)覽大圖任務(wù)4-12jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片任務(wù)4-13JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動任務(wù)4-14JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換任務(wù)4-15JavaScript實(shí)現(xiàn)網(wǎng)頁圖片拖曳任務(wù)4-16jQuery實(shí)現(xiàn)圖片縱向切換任務(wù)4-17jQuery實(shí)現(xiàn)自動與手動均可切換的焦點(diǎn)圖片輪換任務(wù)4-18jQuery實(shí)現(xiàn)單擊左右箭頭滾動圖片任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換在網(wǎng)頁中像切換幻燈片一樣自動切換圖片，可以有效地利用網(wǎng)頁空間，吸引瀏覽者的眼球。在網(wǎng)頁0406.html中實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換效果，其外觀效果如圖所示。【任務(wù)描述】【思路探析】調(diào)用函數(shù)setAuto()，實(shí)現(xiàn)每隔一定時間段調(diào)用函數(shù)auto()。函數(shù)auto()改變當(dāng)前顯示的圖片序號，并調(diào)用函數(shù)mea()。函數(shù)mea()依次調(diào)用函數(shù)setBg()、plays()、conaus()。函數(shù)setBg()控制數(shù)字按鈕的外觀，函數(shù)plays()控制圖片的顯示或隱藏，函數(shù)conaus()控制文字信息的顯示或隱藏。當(dāng)鼠標(biāo)指針指向數(shù)字按鈕時，調(diào)用函數(shù)mea()和clearAuto()。鼠標(biāo)指針離開數(shù)字按鈕時，調(diào)用函數(shù)setAuto()。任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換【特效實(shí)現(xiàn)】網(wǎng)頁0406.html中實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換效果的HTML代碼如表所示。序號程序代碼010203040506070809101112131415161718<divid="focus"><divid="au"><divstyle="display:block;"><ahref=""target="_blank"><imgheight="340"src="images/黃龍.gif"width="325"/></a></div><divstyle="display:none;"><ahref=""target="_blank"><imgheight="340"src="images/然烏湖.gif"width="325"/></a></div><divstyle="display:none;"><ahref=""target="_blank"><imgheight="340"src="images/新路海.gif"width="325"/></a></div><divstyle="display:none;"><ahref=""target="_blank"><imgheight="340"src="images/紫薇山.gif"width="325"/></a></div></div><divid="no"></div><divclass="lunbo"><tablecellspacing="0"cellpadding="0"align="right"border="0">任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換序號程序代碼192021222324252627282930313233343536373839404142<tbody><tr><tdclass="active"id="t0"onmouseover="mea(0);clearAuto();"onmouseout="setAuto();">1</td><tdwidth="6"></td><tdclass="bg"id="t1"onmouseover="mea(1);clearAuto();"onmouseout="setAuto();">2</td><tdwidth="6"></td><tdclass="bg"id="t2"onmouseover="mea(2);clearAuto();"onmouseout="setAuto();">3</td><tdwidth="6"></td><tdclass="bg"id="t3"onmouseover="mea(3);clearAuto();"onmouseout="setAuto();">4</td></tr></tbody></table></div><divid="conau"><divstyle="display:block;"><ahref=""target="_blank">黃龍</a></div><divstyle="display:none;"><ahref=""target="_blank">然烏湖</a></div><divstyle="display:none;"><ahref=""target="_blank">新路海</a></div><divstyle="display:none;"><ahref=""target="_blank">紫薇山</a></div></div></div>任務(wù)4-6JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換網(wǎng)頁0406.html中主要應(yīng)用的CSS代碼如表所示。序號程序代碼0102030405060708091011121314151617181920#au{filter:progid:DXImagetransform.Microsoft.Fade(duration=0.5,overlap=1.0);width:325px;height:340px;}#no{border-top:#725f4a1pxsolid;margin-top:0px;background:#000;line-height:24px;text-align:center;left:0px;top:273px;