Web前端開發(fā)技術(shù)課件T-第六章_第1頁
Web前端開發(fā)技術(shù)課件T-第六章_第2頁
Web前端開發(fā)技術(shù)課件T-第六章_第3頁
Web前端開發(fā)技術(shù)課件T-第六章_第4頁
Web前端開發(fā)技術(shù)課件T-第六章_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第六章

JavaScript開發(fā)實例6.1

Canvas繪圖開發(fā)實例

6.1.1定義canvas標簽<canvas>標簽定義圖形，比如圖表和其他圖像，必須使用腳本來繪制圖形。如圖6.1所示，在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。一個畫布在網(wǎng)頁中是一個矩形框，通過<canvas>元素來繪制.【案例6.1】：創(chuàng)建一個畫布（Canvas）

代碼清單6.1<!DOCTYPEhtml><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;">您的瀏覽器不支持HTML5canvas標簽。</canvas></body></html>默認情況下<canvas>元素沒有邊框和內(nèi)容，可以使用style屬性來添加邊框。標簽通常需要指定一個id屬性(腳本中經(jīng)常引用)，width和height屬性定義的畫布的大小。程序運行效果如圖6.2所示。6.1.2繪制Canvas路徑

創(chuàng)建Canvas和獲取了Canvas環(huán)境上下文之后，就可以開始進行繪圖了，繪圖的方式有兩類：一類是進行圖形繪制，另一類是圖形的處理。所謂基本圖形，就是指線、矩形、圓等最簡單的圖形，任何復(fù)雜的圖形都是由這些簡單的圖形組合而成的。繪制線條在Canvas上畫線，將使用以下兩種方法：moveTo(x,y)定義線條開始坐標lineTo(x,y)定義線條結(jié)束坐標繪制線條必須使用到"ink"的方法，就像stroke().【案例6.2】：使用moveTo與lineTo繪制復(fù)雜圖形

<script>functiondraw(id){ varcanvas=document.getElementById(id); varcontext=canvas.getContext("2d"); context.fillStyle="#eeeeef";//設(shè)置繪圖區(qū)域顏色 context.fillRect(0,0,300,400);//畫矩形 vardx=150; vardy=150; vars=100; context.beginPath();//開始繪圖 context.fillStyle="rgb(100,255,100)";//設(shè)置繪圖區(qū)域顏色 context.strokeStyle="rgb(0,0,100)";//設(shè)置線條顏色 varx=Math.sin(0); vary=Math.coas(0); vardig=Math.PI/15*11; for(vari=0;i<30;i++){//不斷的旋轉(zhuǎn)繪制線條 varx=Math.sin(i*dig); vary=Math.cos(i*dig); context.LineTo(dx+x*s,dy+y*s); } context.closePath(); context.fill(); context.stroke();}</script>代碼解析:本案例利用循環(huán)與moveTo與lineTo形成復(fù)雜結(jié)果，主要是將現(xiàn)將光標移動到指定坐標點，繪制直線的時候以這個坐標點為起點，moveTo(x,y)畫圖到x、y軸的位置。案例運行效果如圖6.8所示【案例6.3】：使用rect與stroke繪制Canvas矩形

<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.rect(20,20,150,100);ctx.stroke();</script>代碼解析:本案例主要使用stroke()或fill()方法在畫布上實際地繪制矩形。其對應(yīng)的語法格式如表6.3所示。JavaScript語法：context.rect(x,y,width,height);參數(shù)值如表6.4所示參數(shù)描述x矩形左上角的x坐標。y矩形左上角的y坐標。width矩形的寬度，以像素計。height矩形的高度，以像素計。程序運行效果如圖6.9所示?！景咐?.4】：使用fillRect()繪制Canvas矩形<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillRect(20,20,150,100);</script>代碼解析:本案例使用fillRect()方法繪制"已填充"的矩形。默認的填充顏色是黑色，對應(yīng)的語法格式如表6.5所示。提示：可以使用fillStyle屬性來設(shè)置用于填充繪圖的顏色、漸變或模式。參數(shù)值如表6.6所示。參數(shù)描述x矩形左上角的x坐標。y矩形左上角的y坐標。width矩形的寬度，以像素計。height矩形的高度，以像素計。程序運行效果如圖6.9所示。JavaScript語法：context.fillRect(x,y,width,height);參數(shù)值如表6.6所示?！景咐?.5】：使用arc()繪制Canvas圓形<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();</script>【案例6.5】：使用arc()繪制Canvas圓形代碼解析:arc()方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。如圖6.10所示，如需通過arc()來創(chuàng)建圓，請把起始角設(shè)置為0，結(jié)束角設(shè)置為2*Math.PI。使用stroke()或fill()方法在畫布上繪制實際的弧，對應(yīng)的語法格式如表6.7所示，參數(shù)如表6.8所示。JavaScript語法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);參數(shù)描述x圓的中心的x坐標。y圓的中心的y坐標。r圓的半徑。sAngle起始角，以弧度計（弧的圓形的三點鐘位置是0度）。eAngle結(jié)束角，以弧度計。counterclockwise可選。規(guī)定應(yīng)該逆時針還是順時針繪圖。False=順時針，true=逆時針。本案例運行的結(jié)果如圖6.11所示。【案例6.6】：使用arc函數(shù)繪制復(fù)雜Canvas圓形<script>

functiondraw(id){

varcanvas=document.getElementById(id);

if(canvas==null){

returnfalse;

}

varcontext=canvas.getContext("2d");

context.fillStyle="#eeeeef";

context.fillRect(0,0,600,700);

for(vari=0;i<=10;i++){//循環(huán)不斷繪制圓形context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle="rgba(255,0,0,0.25)";context.fill();

}

}

</script>

代碼解析:本案例主要說明HTML5繪制圓形，主要包含四個步驟，開始創(chuàng)建路徑、創(chuàng)建圖形的路徑、路徑創(chuàng)建完成后，關(guān)閉路徑和設(shè)定繪制樣式，調(diào)用繪制方法，繪制路徑，代碼的解析請查看源代碼注釋程序運行如圖6.12所示6.1.3繪制Canvas圖片無論開發(fā)的是應(yīng)用程序還是游戲軟件，都是離不開圖片，沒有圖片就無法讓整個頁面漂亮起來。開發(fā)HTML5游戲的時候，游戲中的地圖、背景、人物、物品等都是由圖片組成的，所以圖片的顯示和操作都非常重要，本節(jié)主要使用CanvasdrawImage函數(shù)、getImageData和putImageData繪制圖片，使用createImageData新建圖片像素?！纠?.7】使用drawImage()函數(shù)在畫布上繪制圖片<body>img標簽：<br/><imgsrc="images/image.jpg"></img><br/>Canvas畫板：<br/><canvasid="myCanvas"width="400"height="400">你的瀏覽器不支持HTML5</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varctx=c.getContext("2d");varimage=newImage();image.src="images/image.jpg";image.onload=function(){ctx.drawImage(image,10,10);ctx.drawImage(image,110,10,110,110);ctx.drawImage(image,10,10,50,50,210,10,150,150);};</script></body>drawImage()函數(shù)在Canvas畫布上繪制圖像、畫布或視頻，也能夠繪制圖像的某些部分，已經(jīng)增加或減少圖像的尺寸，對應(yīng)的語法格式如表9.15到表9.17所示，參數(shù)如表9.18所示。在畫布上定位圖像：表drawImage()語法1在畫布上定位圖像，并規(guī)定圖像的寬度和高度：表drawImage()語法2剪切圖像，并在畫布上定位被剪切的部分：表drawImage()語法3JavaScript語法：context.drawImage(img,x,y);JavaScript語法：context.drawImage(img,x,y,width,height);JavaScript語法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);表drawImage()函數(shù)參數(shù)參數(shù)描述img規(guī)定要使用的圖像、畫布或視頻。sx可選。開始剪切的x坐標位置。sy可選。開始剪切的y坐標位置。swidth可選。被剪切圖像的寬度。sheight可選。被剪切圖像的高度。x在畫布上放置圖像的x坐標位置。y在畫布上放置圖像的y坐標位置。width可選。要使用的圖像的寬度（伸展或縮小圖像）。height可選。要使用的圖像的高度（伸展或縮小圖像）。<imgsrc="images/image.jpg"></img>表示運行image.jpg原圖用于CanvasdrawIamge()函數(shù)畫圖效果的對比;ctx.drawImage(image,10,10);表示從坐標(10,10)的位置繪制image.jpg圖片；ctx.drawImage(image,110,10,110,110);表示從坐標(110,10)位置繪制整張image.jpg圖片到長110、款110的矩形區(qū)域內(nèi)，所以本例的運行效果會有一定的拉升感；ctx.drawImage(image,10,10,50,50,210,10,150,150);表示將image.jpg圖片從(10,10)坐標位置截取(50,50)的寬度和高度，然后將截取到的圖片從坐標(210,10)位置開始繪制，放到長110、寬110的矩形區(qū)域內(nèi)?！境绦蜻\行效果】如圖所示。案例運行后的效果圖【例6.8】Canvas開發(fā)實例-幀動畫效果1．構(gòu)建基本窗口代碼清單：<!DOCTYPEhtml><metacharset="utf-8"/><styletype="text/css">body{text-align:center;}#c1{border:1pxdottedblack}</style><body><h2>超級瑪麗動畫效果</h2><imgid="img1"src="images/image.png"/><inputid="btnGO"type="button"value="開始"/><br><canvasid="c1"width="320"height="200"></canvas><br></body></html>6.1.4

幀動畫開發(fā)實例2．構(gòu)建超級瑪麗動畫效果：<script>varisAnimStart=false; //是否開始動畫varMarioMovie=null; //動畫函數(shù)varframen=0; //圖片切割個數(shù)varframes=[]; //保存每幀動畫起始坐標,本例圖片共有for(framen=0;framen<15;framen++){ frames[framen]=[32*framen,0];}//定義每幀圖像的寬度和高度varfWidth=32,fHeight=32;function$(id){returndocument.getElementById(id);}functioninit(){ //響應(yīng)onclick事件$("btnGO").onclick=function() {//如果沒開始動畫，則開始動畫 if(!isAnimStart) { varctx=$("c1").getContext("2d"); varfIndex=0; varcX=160, cY=100; animHandle=setInterval(function(){ ctx.clearRect(0,0,320,200);ctx.drawImage(img1, frames[fIndex][0],frames[fIndex][1],fWidth,fHeight, cX-64,cY-64,fWidth*4,fHeight*4); fIndex++; if(fIndex>=frames.length) { fIndex=0; } },100)$("btnGO").value="停止"; isAnimStart=true; } else { $("btnGO").value="開始"; clearInterval(animHandle); isAnimStart=false; } }}init();</script>程序運行效果如圖9.15所示。圖9.30幀動畫效果圖6.2.1認識WebStorageWebstorage是一種將少量數(shù)據(jù)存儲在客戶端（client）硬盤的技術(shù)，只要支持WebstorageAPI規(guī)格的瀏覽器，網(wǎng)頁設(shè)計者都可以使用JavaScript來操作它。使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。早些時候,本地存儲使用的是

cookie。但是Web存儲需要更加的安全與快速，這些數(shù)據(jù)不會被保存在服務(wù)器上，而只用于用戶請求網(wǎng)站數(shù)據(jù)上。它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以

鍵/值

對存在,web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。WebStorage在瀏覽器的

API有兩個：localStorage和sessionStorage，存在于

window對象中：localStorage對應(yīng)

window.localStorage，sessionStorage對應(yīng)

window.sessionStorage。6.3網(wǎng)頁數(shù)據(jù)存儲WebStorage開發(fā)實例

localStorage-用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。sessionStorage-用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。在使用

web存儲前,應(yīng)檢查瀏覽器是否支持

localStorage和sessionStorage:if(typeof(Storage)!=="undefined"){//是的!支持

localStoragesessionStorage對象!//一些代碼.....}Else{//抱歉!不支持

web存儲。

}當(dāng)瀏覽器不支持Webstorage時，就會彈出警告窗口，如果支持就執(zhí)行l(wèi)ocalStorage和sessionStorage程序代碼。目前InternetExplorer8+、Firefox、Opera、Chrome和Safari都支持Webstorage。需要注意的是，IE和Firefox測試時需要把文件上傳到服務(wù)器或localhost才能運行，建議測試時使用GoogleChrome瀏覽器。Webstorage提供客戶端存儲數(shù)據(jù)的兩個對象為：localStorage和sessionStorage基本使用方法如圖6-10所示：這里的作用域指的是：如何隔離開不同頁面之間的localStorage（例如我們不能在百度的頁面上能讀到騰訊的localStorage）。localStorage只要在相同的協(xié)議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。sessionStorage比localStorage更嚴苛一點，除了協(xié)議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標簽頁）下。LocalStorage的生命周期及其有效范圍與Cookie類似，它的生命周期由網(wǎng)頁程序設(shè)計者自行制定，不會隨著瀏覽器的關(guān)閉而消失，適合于在數(shù)據(jù)需要分頁或跨窗口的場合。關(guān)閉瀏覽器之后除非主動清除數(shù)據(jù)，否則localStorage數(shù)據(jù)會一直存在；sessionStorage在關(guān)閉瀏覽器窗口或分頁（tab）后數(shù)據(jù)就會消失，數(shù)據(jù)也僅對當(dāng)前窗口或分頁有效，適合于暫時保存數(shù)據(jù)的場合。6.2.2localStorage和sessionStorage在HTML5標準中，WebStorage只允許存儲字符串?dāng)?shù)據(jù)，不管是

localStorage，還是

sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：1.訪問localStorage的方法localStorage對象存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用，訪問方式有三種：Storage對象的setItem和getItem方法、數(shù)組索引方法和屬性操作方法。存儲語法：存儲使用setItem方法，格式如下：window.localStorage.setItem(key,value);例如，我們想指定一個localStorage變量userdata，并指定它的值為"菲子的個人主頁"，程序代碼寫為：window.localStorage.setItem(“userdata”,"菲子的個人主頁")；數(shù)組索引存儲語法：window.localStorage[“userdata”]="菲子的個人主頁";屬性方法存儲語法：window.localStorage.userdata="菲子的個人主頁";讀取語法：當(dāng)我們想讀取userdata數(shù)據(jù)時，使用getItem方法，格式如下：window.localStorage.getItem(key);例如：varvalue1=window.localStorage.getItem(“userdata”);數(shù)組索引讀取語法：varvalue2=window.localStorage[“userdata”];屬性方法讀取語法：varvalue3=window.localStorage.userdata;刪除語法：要刪除一條localStorage數(shù)據(jù)，可以調(diào)用localStorage.removeItem(key)方法或delete屬性進行操作，例如：localStorage.removeItem("username");deletelocalStorage.removeItem.username;deletelocalStorage.removeItem("username");要想刪除localStorage全部數(shù)據(jù)，可以使用clear()方法。<!DOCTYPEhtml><html><head><title>訪問localStorage的方法實例</title><linkrel=stylesheettype="text/css"href="color.css"><scripttype="text/javascript">functionisLoad(){ if(typeof(Storage)=="undefined") { alert("Sorry!!我們的瀏覽器不支持WebStorage"); }else{ btn_save.addEventListener("click",saveToLocalStorage); btn_load.addEventListener("click",loadFromLocalStorage); btn_clear.addEventListener("click",clearLocalStorage); }}functionsaveToLocalStorage(){ localStorage.username=inputname.value;}functionloadFromLocalStorage(){ show_LocalStorage.innerHTML=localStorage.username+"我們好~歡迎來我的網(wǎng)站~";}functionclearLocalStorage(){ localStorage.clear(); show_LocalStorage.innerHTML=localStorage.username;}</script></head><body><bodyonload="isLoad()"><imgsrc="images/welcome.jpg"/><br/>

請輸入我們的姓名：<inputtype="text"id="inputname"value=""><br/><divid="show_LocalStorage"></div><br/><buttonid="btn_save">保存至localstorage</button><buttonid="btn_load">從localstorage獲取資料</button><buttonid="btn_clear">清除localstorage資料</button></body></html>【案例6-9】訪問localStorage的方法開發(fā)實例【實例解析】當(dāng)用戶輸入姓名，并單擊“保存至localStorage”按鈕時，代碼

localStorage.username=inputname.value;數(shù)據(jù)就會被存儲localStorage列表中，打開Chrome瀏覽器開發(fā)者工具中“Application”中的localStorage選項可以看到保存的所有l(wèi)ocalStorage數(shù)據(jù)的key和value的鍵值對信息；當(dāng)單擊“從localStorage獲取資料”按鈕時，代碼localStorage.username就會將名字顯示出來，如圖6-11所示：

請讀者將瀏覽器窗口關(guān)閉，重新打開該HTML文件，再當(dāng)單擊“從localStorage獲取資料”按鈕時，會發(fā)現(xiàn)存儲的localStorage數(shù)據(jù)一直都在，不會因為關(guān)閉瀏覽器而消失，如圖6-12所示：點擊“清除localstorage資料”按鈕，存儲localStorage列表中的"username"數(shù)據(jù)就被清除了，打開Chrome瀏覽器開發(fā)者工具中“Application”中的localStorage選項可以看到保存在localStorage數(shù)據(jù)的key和value的鍵值對信息中已經(jīng)沒有"username"的數(shù)據(jù)了；頁面中"username"顯示的位置變?yōu)椤皍ndefined”，如圖6-13所示：sessionStorage只能保存在單一的瀏覽器或分頁（tab），關(guān)閉瀏覽器后存儲的數(shù)據(jù)就消失了，其最大的用途在于保存一些臨時的數(shù)據(jù)，防止用戶重新整理網(wǎng)頁時不小心丟失這些數(shù)據(jù)，sessionStorage的操作方法和localStorage相同，下面列出sessionStorage方法語法，以供讀者參考，只是不再重復(fù)說明：存儲語法：window.sessionStorage.setItem(“userdata”,"菲子的個人主頁")；window.sessionStorage[“userdata”]="菲子的個人主頁";window.sessionStorage.userdata="菲子的個人主頁";讀取語法：varvalue1=window.sessionStorage.getItem(“userdata”);varvalue2=window.sessionStorage[“userdata”];varvalue3=window.sessionStorage.userdata;刪除語法：sessionStorage.removeItem("username");deletesessionStorage.removeItem.username;deletesessionStorage.removeItem("username");要想刪除sessionStorage全部數(shù)據(jù)，可以使用clear()方法。2．訪問sessionStorage的方法在已經(jīng)了解WebStorage基本語法之后，本小節(jié)使用localStorage和sessionStorage制作一個網(wǎng)頁中常見并且實用的功能，即“登錄/注銷”和“計數(shù)器”?！景咐?-10】WebStorage實例-登錄頁面開發(fā)實例。設(shè)計說明：利用localStorage數(shù)據(jù)保存的特性，我們做一個登錄/注銷的界面并統(tǒng)計用戶的進站次數(shù)（計數(shù)器）。當(dāng)用戶單擊“登錄”按鈕時，出現(xiàn)“請輸入你的姓名”的文本框讓用戶輸入姓名；單擊“發(fā)送”按鈕后，將姓名存儲到localStorage；重載頁面，將進入網(wǎng)站次數(shù)存儲于localStorage，并將用戶姓名以及進站次數(shù)顯示在<div>標記中；單擊“注銷”按鈕后，<div>標記顯示已注銷，并清空localStorage。顯示頁面如圖6-14到圖6-16所示，完整代碼查閱書本所附代碼：6.2.3WebStorage實例-登錄頁面案例代碼：設(shè)置頁面HTML5標簽，<bodyonLoad="isLoad()">說明網(wǎng)站body頁面加載完成后執(zhí)行isLoad()函數(shù)內(nèi)容：<!DOCTYPEhtml><html><head><title>WebStorage開發(fā)實例</title><metacharset="utf-8"/><linkrel=stylesheettype="text/css"href="color.css"><scripttype="text/javascript">functionisLoad(){ inputSpan.style.display='none';/*隱藏輸入框及發(fā)送按鈕*/ if(typeof(Storage)=="undefined") { alert("Sorry!!我們的瀏覽器不支持WebStorage"); }else{ /*判斷姓名是否已存入localStorage，已存入時才執(zhí)行{}內(nèi)的指令*/ if(localStorage.username){ /*localStorage.counter資料不存在時才執(zhí)行傳回undefined*/ if(!localStorage.counter){ localStorage.counter=1;/*初始值設(shè)為1*/ }else{ localStorage.counter++;/*遞增*/ } btn_login.style.display='none';/*隱藏登錄按鈕*/ show_LocalStorage.innerHTML=localStorage.username+"您好，這是我們的第"+localStorage.counter+"次來到網(wǎng)站~"; } btn_login.addEventListener("click",login); btn_send.addEventListener("click",sendok); btn_logout.addEventListener("click",clearLocalStorage); }}functionsendok(){ localStorage.username=inputname.value; location.reload();/*重新載入網(wǎng)頁*/ }functionlogin(){ inputSpan.style.display=''; /*顯示姓名輸入框及發(fā)送按鈕*/}functionclearLocalStorage(){ localStorage.clear();/*清空localStorage*/ show_LocalStorage.innerHTML="已成功退出!!"; btn_login.style.display='';/*顯示登錄按鈕*/ inputSpan.style.display='';/*顯示姓名輸入框及發(fā)送按鈕*/}</script></head><bodyonLoad="isLoad()"><buttonid="btn_login">登錄</button><buttonid="btn_logout">退出</button><br/><imgsrc="images/welcome.jpg"/><br/><spanid="inputSpan">請輸入我們的姓名：<inputtype="text"id="inputname"value=""><buttonid="btn_send">發(fā)送</button></span><br/><divid="show_LocalStorage"></div><br/></body></body></html>【設(shè)計說明】：演示效果如圖所示，當(dāng)點擊網(wǎng)頁中的“選項1”、“選項2”或“選項3”按鈕時，分別將其折疊起來的選項框具體內(nèi)容展現(xiàn)，出現(xiàn)如圖所示的效果，再次點擊，則具體內(nèi)容又折疊起來。該效果可應(yīng)用到一些菜單顯示和新聞文章顯示等實際應(yīng)用場景中。6.3手風(fēng)琴菜單設(shè)計圖

手風(fēng)琴菜單折疊效果圖手風(fēng)琴菜單展開效果步驟1：設(shè)計HTML5頁面顯示，設(shè)計三組class為accordion的選項button和class為panel的div元素，其中div中使用p元素來設(shè)計對應(yīng)的折疊框具體內(nèi)容信息，：<h2>手風(fēng)琴動畫</h2><p>點擊以下選項顯示折疊內(nèi)容</p><buttonclass="accordion">選項1</button><divclass="panel"><p>選項1內(nèi)容.</p></div><buttonclass="accordion">選項2</button><divclass="panel"><p>選項2內(nèi)容</p></div><buttonclass="accordion">選項3</button><divclass="panel"><p>選項3內(nèi)容</p></div>其中<buttonclass="accordion">選項1</button>定義選項1-3的class屬性為accordion；<divclass="panel"></div>標簽中包含的是折疊隱藏的菜單內(nèi)容。步驟2：定義CSS屬性，實現(xiàn)class為accordion的選項button和class為panel的div元素，、div中的p元素的樣式：button.accordion{background-color:#eee; //背景顏色

color:#444; //字體顏色

cursor:pointer; //鼠標顯示外觀為手型

padding:18px; //填充為18像素

width:100%; //寬度為100%border:none; //無邊框

text-align:left; //文字為左對齊

outline:none; //沒有外線框

font-size:15px; //字體大小15像素

transition:0.4s; //運動速度為0.4秒}button.accordion.active,button.accordion:hover{background-color:#ddd; //鼠標激活和懸停狀態(tài)的背景顏色}div.panel{padding:018px; //內(nèi)容的上下填充為0像素，左右填充為18像素，

background-color:white; //背景顏色

max-height:0; //最大高度為自動高度

overflow:hidden; //隱藏超出寬度的內(nèi)容

transition:max-height0.2sease-out; //動畫為0.2逐漸漸出的方式顯示文本內(nèi)容}其中button.accordion定義class為accordion的button標簽的顯示樣式；button.accordion.active,button.accordion:hover定義class為accordion的button標簽的點擊后和懸停顯示樣式；div.panel定義class為panel的div標簽的顯示樣式；步驟3：用JavaScript代碼實現(xiàn)點擊后的效果：varacc=document.getElementsByClassName("accordion");//獲取class名為accordion的標簽對象vari;for(i=0;i<acc.length;i++){//對獲取的標簽1-3對象都添加onclick事件監(jiān)聽對象

acc[i].onclick=function(){this.classList.toggle("active");//切換當(dāng)前點擊的標簽active屬性

varpanel=this.nextElementSibling;//尋找當(dāng)前節(jié)點的下一個兄弟節(jié)點

if(panel.style.maxHeight){//如果兄弟節(jié)點有maxHeight（即當(dāng)前panel對象是顯示的狀態(tài)）

panel.style.maxHeight=null;//則將panel對象maxHeight設(shè)為null（即設(shè)置為隱藏狀態(tài)）

}else{panel.style.maxHeight=panel.scrollHeight+"px";//如果panel對象maxHeight為null（即設(shè)置為隱藏狀態(tài)），則將其maxHeight設(shè)置為滾動高度（即通過設(shè)置高度來實現(xiàn)顯示效果）

}}}【設(shè)計說明】：本實例演示了如何結(jié)合CSS和JavaScript來一起渲染圖片。首先，我們使用CSS來創(chuàng)建modal窗口（對話框），默認是隱藏的，左圖是模塊窗口隱藏時的狀態(tài)；然后，我們使用JavaScript來顯示模態(tài)窗口，當(dāng)我們點擊圖片時，圖片會在彈出的窗口中顯示，右圖是模塊窗口顯示時的狀態(tài)：6.4圖片Modal（模態(tài)）效果設(shè)計圖

模塊窗口隱藏時狀態(tài)圖10.7模塊窗口顯示時狀態(tài)步驟1：HTML5頁面設(shè)計，使用一個img標簽放入一個圖片，并設(shè)置圖片的高為200像素，寬為300像素；設(shè)計一個div作為模塊框，其id為myModal，類名為modal，模態(tài)框中定義了span、img和div標簽，用來部署模態(tài)框的內(nèi)容：<body><imgid="myImg"src="images/lights600x400.jpg"alt="NorthernLights,Norway"width="300"height="200"><divid="myModal"class="modal"><spanclass="close">×</span><imgclass="modal-content"id="img01"><divid="caption"></div></div>步驟2：CSS頁面渲染，實現(xiàn)id為myImg的圖片、id為caption當(dāng)前狀態(tài)和鼠標懸停狀態(tài)的樣式；實現(xiàn)類名為modal和.modal-content的樣式等，并且還實現(xiàn)了窗口的自適應(yīng)設(shè)計，具體如下：#myImg{ /*設(shè)置id為*myImg的圖片的樣式/border-radius:5px; /*設(shè)置半徑為5像素的圓角邊框*/cursor:pointer; /*設(shè)置鼠標狀態(tài)*/transition:0.3s; /*設(shè)置動畫變化的持續(xù)時間為0.3秒*/}#myImg:hover{opacity:0.7;} /*設(shè)置圖片的鼠標懸停狀態(tài)樣式：透明度為原圖的0.7*/.modal{ /*設(shè)置class為modal的模態(tài)框樣式*/display:none; /*默認隱藏*/position:fixed; /*位置為：固定定位*/z-index:1; /*模態(tài)框在頂層*/padding-top:100px; /*模態(tài)框的填充效果為100像素*/left:0; /*居左0像素*/top:0; /*居上0像素*/width:100%; /*寬度為100%，滿屏顯示*/height:100%; /*高度為100%，滿屏顯示*/overflow:auto; /*如果文字不夠顯示則出現(xiàn)滾動條*/background-color:rgb(0,0,0); /*設(shè)置背景色*/background-color:rgba(0,0,0,0.9); /*設(shè)置有透明度的背景色*/}.modal-content{ /*設(shè)置class為modal-content的狀態(tài)*/margin:auto; /*外邊距為自動邊距*/display:block; /*塊狀顯示*/width:80%; /*寬度為80%*/max-width:700px; /*最大寬度為700像素*/}#caption{ /*設(shè)置id為caption的圖片的樣式*/margin:auto; /*外邊距為自動邊距*/display:block; /*塊狀顯示*/width:80%; /*寬度為80%*/max-width:700px; /*最大寬度為700像素*/text-align:center; /*文字為居中對齊*/color:#ccc; /*顏色為#ccc*/padding:10px0; /*填充為上下10像素，左右0像素*/height:150px; /*高度為150像素*/}.modal-content,#caption{ /*設(shè)置classmodal-content和idcaption的元素的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論