javascript客戶端驗(yàn)證頁(yè)面特效制作理論部分教學(xué)tp4v1

CSS樣式特效第四章回顧詳述getElementById()的主要功能詳述getElementsByName()的主要功能簡(jiǎn)述制作浮動(dòng)廣告圖片的實(shí)現(xiàn)思路簡(jiǎn)述制作全選/反選多個(gè)復(fù)選框的實(shí)現(xiàn)思路預(yù)習(xí)檢查樣式規(guī)則的語(yǔ)法是什么？用法有哪些onMouseOver與onMouseOut的區(qū)別inline、block與none屬性分別起什么作用本章任務(wù)演示示例2：頁(yè)面效果演示示例1：頁(yè)面效果演示示例3：頁(yè)面效果

制作51job的彈出層效果

制作”點(diǎn)卡“圖片切換的特效

制作改變邊框樣式、按鈕圖片樣式的特效本章目標(biāo)會(huì)使用style樣式屬性動(dòng)態(tài)改變邊框顏色會(huì)使用className類名屬性動(dòng)態(tài)改變按鈕背景圖片會(huì)使用display顯示屬性實(shí)現(xiàn)層或圖片的隱藏/顯示和切換特效回顧已學(xué)的CSS樣式表-1樣式規(guī)則的語(yǔ)法是什么？用法有哪些？

演示示例4：行內(nèi)樣式演示示例5：內(nèi)嵌樣式演示示例6：外部樣式表回顧已學(xué)的CSS樣式表-2-1回顧HTML中講過(guò)的CSS樣式表，常見的樣式有哪些？常見樣式文本屬性樣式背景屬性樣式不帶下劃線的超連接樣式細(xì)邊框樣式圖片按鈕樣式回顧已學(xué)的CSS樣式表-2-2文本屬性說(shuō)明font-size字體大小font-family字體類型font-style字體樣式color設(shè)置或檢索文本的顏色text-align文本對(duì)齊背景屬性說(shuō)明background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置一個(gè)指定的圖像如何被重復(fù)回顧已學(xué)的CSS樣式表-2-3名稱說(shuō)明不帶下劃線的超連接A{color:blue;text-decoration:none;}A:hover{color:red;}細(xì)邊框樣式.boxBorder{border-width:1px;border-style:solid;}圖片按鈕樣式.picButton{background-image:url(images/back2.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}回顧已學(xué)的CSS樣式表-3制作如下圖所示的“回顧樣式.html”的頁(yè)面效果練習(xí)答案練習(xí)代碼細(xì)邊框樣式圖片按鈕樣式超鏈接樣式制作改變字體大小的樣式特效實(shí)現(xiàn)思路

1、創(chuàng)建改變樣式的JavaScript代碼

this.style.fontSize='24px'this.style.fontSize='14px‘2、利用鼠標(biāo)相關(guān)事件調(diào)用JavaScript代碼

onMouseOver="this.style.fontSize='24px'“onMouseOut="this.style.fontSize='14px'"使用了style屬性樣式表：font-size腳本代碼：fontSize演示示例7：改變字號(hào)大小的樣式特效小結(jié)1請(qǐng)編寫如下圖所示，實(shí)現(xiàn)隨鼠標(biāo)移入改變邊框色的效果練習(xí)代碼練習(xí)答案鼠標(biāo)移入邊框顏色變?yōu)榧t色制作改變按鈕背景圖片的特效-1如何實(shí)現(xiàn)如下圖所示，按鈕的圖片背景效果？鼠標(biāo)移入按鈕背景變色制作改變按鈕背景圖片的特效-2演示示例8：改變樣式backgroundImage演示演示：通過(guò)改變樣式backImage能否實(shí)現(xiàn)？onMouseOver="this.style.backgroundImage='url(images/back2.jpg)';"失敗的原因：當(dāng)鼠標(biāo)移到按鈕上方時(shí)，除了圖片要換以外，還應(yīng)保留border、margin、padding等樣式。即使用多行代碼onmouseOver="this.style.backImage=‘url(images/back2.jpg)';this.style.boder=0;this.style.padding=0......";解決辦法：創(chuàng)建mouseOver和mouseOut兩種類樣式，然后使用className類屬性進(jìn)行切換制作改變按鈕背景圖片的特效-3<STYLEtype="text/css">.mouseOverStyle{background-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px; }.mouseOutStyle{background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px; }</STYLE>查看完整代碼定義樣式制作改變按鈕背景圖片的特效-4<TR><TDheight="30"colSpan=2align=center><INPUTname=Buttontype="button"class="mouseOutStyle"value="登錄"onMouseOver="this.className='mouseOverStyle'"onMouseOut="this.className='mouseOutStyle'"></TD></TR>……查看完整代碼利用鼠標(biāo)相關(guān)事件調(diào)用樣式代碼使用className應(yīng)用類樣式小結(jié)2編寫如下圖所示，鼠標(biāo)移入改變按鈕背景圖片的特效練習(xí)代碼練習(xí)答案按鈕背景圖片改變層的顯示/隱藏特效-1顯示屬性display參數(shù)值描述block默認(rèn)值。按塊顯示，換行顯示.用該值為對(duì)象之后添加新行none不顯示，隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏對(duì)象保留其物理空間。inline按行顯示，和其他元素同一行顯示。顯示屬性display適用于所有HTML標(biāo)簽，常用于層DIV、圖片Img的顯示和隱藏層的顯示/隱藏特效-2如何實(shí)現(xiàn)如下圖所示的頁(yè)面上廣告層的效果？顯示廣告層隱藏廣告層層的顯示/隱藏特效-31、插入兩個(gè)層，分別插入對(duì)應(yīng)圖片，注意設(shè)置兩個(gè)層的z-index屬性2、寫腳本函數(shù)，當(dāng)單擊時(shí)同時(shí)關(guān)閉這兩個(gè)層。層的顯示/隱藏特效-4查看完整代碼“彈出、關(guān)閉層”<STYLEtype="text/css">#advLayer{position:absolute; left:62px;top:44px;width:367px;height:194px;z-index:2;}</STYLE><SCRIPTlanguage="javascript">functioncloseMe(){document.getElementById("advLayer").style.display="none";}functionshowMe(){document.getElementById("advLayer").style.display="block";}</SCRIPT>……<INPUTname="placeButton"type="button"value="關(guān)閉層"onClick="closeMe()"><INPUTname="placeButton2"type="button"value="彈出層"onClick="showMe()">……隱藏id為advLayer的層顯示id為advLayer的層單擊事件調(diào)用loseMe()方法層的顯示/隱藏特效-5查看完整代碼<STYLEtype="text/css">#advLayer{position:absolute;left:5px;top:101px;width:100px;height:224px;z-index:1;}#closeLayer{position:absolute;left:70px;top:329px;width:35px;height:22px;z-index:2;}</STYLE><SCRIPTlanguage="javascript">functioncloseMe(){document.getElementById("closeLayer").style.display="none";document.getElementById("advLayer").style.display="none"; }</SCRIPT>……<DIVid="advLayer"><IMGsrc="images/adv.jpg"width="110"></DIV><DIVid="closeLayer"onClick="closeMe()"><IMGsrc="images/closePic.jpg"width="42"height="14"></DIV>……單擊事件調(diào)用closeMe()方法獲取層對(duì)象顯示屬性小結(jié)3編寫如下圖所示，層的顯示隱藏特效練習(xí)代碼練習(xí)答案使用函數(shù)的參數(shù)，傳遞超鏈接的內(nèi)容修改按鈕值：document.myform.placeButton.value=place圖片的顯示/隱藏特效-1如何實(shí)現(xiàn)如下圖所示的圖片切換特效？如何獲取圖片Img對(duì)象？圖片的顯示/隱藏特效-21、可以使用DIV中插入圖片來(lái)實(shí)現(xiàn)，但更簡(jiǎn)潔的辦法是直接使用圖片的display屬性2、訪問(wèn)圖片Img對(duì)象的方法：

document.getElementById("圖片ID")圖片的顯示/隱藏特效-3<SCRIPTlanguage="javascript">functionInitImage(){document.getElementById("gameTab2").style.display="none";document.getElementById("game").style.display="none";document.getElementById("mobileTab1").style.display="none";}functionshowGame(){

document.getElementById("gameTab1").style.display="none";

document.getElementById("gameTab2").style.display="block";

document.getElementById("game").style.display="block"; document.getElementById("mobile").style.display="none"; document.getElementById("mobileTab2").style.display="none";

document.getElementById("mobileTab1").style.display="block";}</SCRIPT>……<TD><IMGid="gameTab1"src="images/gameTab1.jpg"width="83"height="47"onMouseOver="showGame()"><IMGid="gameTab2"src="images/gameTab2.jpg"width="83"height="49"></TD><TD><IMGid="mobileTab1"src="images/mobileTab1.jpg"width="81"height="49"><IMGid="mobileTab2"src="images/mobileTab2.jpg"width="82"height="47"></TD>……隱藏id為gameTab1的層顯示id為gameTab2的層點(diǎn)卡圖片切換特效查看完整代碼小結(jié)4編寫如下圖所示，圖片的顯示隱藏特效練習(xí)代碼練習(xí)答案提問(wèn)：這兩段代碼重復(fù)很多，能否進(jìn)行簡(jiǎn)化？圖片的顯示/隱藏特效-4可以，使用有參函數(shù)來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)代碼如下：<SCRIPTlanguage="javascript">functionInitImage(){document.getElementById("gameTab2").style.display="none";document.getElementById("game").style.display="none";document.getElementById("mobileTab1").style.display="none";}functionTabChange(show,hidden){document.getElementById(s