版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
模塊二?JavaScript
高級(jí)特效1課題
１
JavaScript
語言基礎(chǔ)課題
２
JavaScript
對(duì)象化編程課題
３?制作表單驗(yàn)證類特效2345678目錄課題
４?制作層切換和層提示特效課題
５?制作菜單類特效課題
６?制作廣告類特效課題
７?制作滾動(dòng)類和日期類特效課題
８?制作網(wǎng)頁輔助類特效課題
１?JavaScript
語言基礎(chǔ)v
學(xué)習(xí)目標(biāo)１.
了解
JavaScript
的概念，能編寫簡單的
JavaScript
程序。２.
了解常量、變量、函數(shù)、運(yùn)算符和優(yōu)先級(jí)等概念，能正確運(yùn)用常量、變量、函數(shù)和運(yùn)算符，能按照優(yōu)先級(jí)正確書寫表達(dá)式。３.
了解常用內(nèi)部函數(shù)的用法，能根據(jù)需要自定義函數(shù)。４.
了解數(shù)組的概念，能正確定義和引用數(shù)組。５.
掌握分支語句和循環(huán)語句的使用方法，能進(jìn)行順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)程序的設(shè)計(jì)。課題
１?JavaScript
語言基礎(chǔ)一、JavaScript
簡介JavaScript
是一種基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語言，是目前
Web應(yīng)用程序開發(fā)者使用最為廣泛的客戶端腳本編程語言。JavaScript
能通過
DOM(DocumentObjectModel，文檔結(jié)構(gòu)模型)及自身提供的對(duì)象、操作方法實(shí)現(xiàn)所需的功能。JavaScript
采用事件驅(qū)動(dòng)方式，能響應(yīng)鍵盤事件、鼠標(biāo)事件及瀏覽器窗口事件等，并執(zhí)行指定的操作。課題
１?JavaScript
語言基礎(chǔ)二、第一個(gè)JavaScript
程序計(jì)算機(jī)程序是指一組指示計(jì)算機(jī)執(zhí)行動(dòng)作或做出判斷的指令，通常用某種程序設(shè)計(jì)語言編寫。一般情況下，計(jì)算機(jī)程序要編譯成機(jī)器語言程序后再運(yùn)行。還有一種未經(jīng)編譯就可運(yùn)行的程序，通常稱為
“
腳本程序”。JavaScript屬于客戶端腳本語言，VBScript(主要用于ASP)屬于服務(wù)器端腳本語言?？蛻舳四_本和服務(wù)器端腳本比較課題
１?JavaScript
語言基礎(chǔ)編寫
JavaScript程序可選擇普通的文本編輯器或集成開發(fā)環(huán)境。Dreamweaver集成了JavaScript開發(fā)環(huán)境，提供了強(qiáng)大的
JavaScript支持。JavaScript需要嵌入
HTML中，即
JavaScript的存在依賴于
HTML文檔。在
HTML中，使用
<script>標(biāo)記引入
JavaScript，使用
</script>結(jié)束JavaScript，<script>和
</script>之間是
JavaScript腳本。<script></script>可以放在
<head>和
</head>之間，也可以放在<body>和
</body>之間。二者的區(qū)別是:１)head部分的腳本:需調(diào)用才執(zhí)行的腳本或事件觸發(fā)執(zhí)行的腳本放在HTML的
head部分。當(dāng)把腳本放在
head部分時(shí)，可以保證腳本在任何調(diào)用之前被加載。課題
１?JavaScript
語言基礎(chǔ)２)body部分的腳本:當(dāng)頁面被加載時(shí)立即執(zhí)行的腳本放在
HTML的
body部分。放在
body部分的腳本通常用來生成頁面的內(nèi)容。<script>標(biāo)記有一個(gè)
language屬性，用于指明使用的語言，其值可以為“JavaScript”“VBScript”
或者
“JScript”。<script>標(biāo)記還有一個(gè)
type屬性，用于指明文本類型，其值為
“text/javascript”。課題
１?JavaScript
語言基礎(chǔ)和
VBScript不區(qū)分大小寫不同，JavaScript嚴(yán)格區(qū)分大小寫。在編寫
JavaScript腳本語句時(shí)，用
“；”
作為當(dāng)前語句的結(jié)束符。語句分行后，作為語句結(jié)束符的
“；”
可省略。也可將多個(gè)語句寫在同一行中，若將多個(gè)語句寫在同一行中，則語句之間的
“；”
不能省略。JavaScript中的注釋采用和
Java中類似的方式，單行注釋前加
“
//”，多行注釋放在
“
/?
”和
“?
/”之間。課題
１?JavaScript
語言基礎(chǔ)三、常量和變量１.
常量常量是程序執(zhí)行過程中其值保持不變的量，有數(shù)值常量和字符串常量兩種。在
VBScript中，字符串常量只能使用雙引號(hào)作為定界符。與
VBScript不同，在JavaScript
中不僅允許使用雙引號(hào)和單引號(hào)作為定界符，而且允許雙引號(hào)和單引號(hào)相互嵌套。課題
１?JavaScript
語言基礎(chǔ)２.
變量變量是程序執(zhí)行過程中可能發(fā)生變化的量。使用
var
關(guān)鍵字對(duì)變量進(jìn)行顯式聲明，不能使用
Var
和
VAR，JavaScript
對(duì)關(guān)鍵字的大小寫敏感
(v
和
V
是不同的字符)。聲明變量的語法格式如下:var
變量[＝
值];變量可以在聲明的同時(shí)賦值，也可以在聲明后使用過程中再賦值。賦值語句的語法格式如下:變量
＝
表達(dá)式;課題
１?JavaScript
語言基礎(chǔ)變量的有效范圍稱為變量的作用域。JavaScript
有局部變量和全局變量兩種變量。局部變量是指只能在本變量聲明的函數(shù)內(nèi)部調(diào)用的變量。全局變量是指在整個(gè)代碼中都可以調(diào)用的變量。JavaScript
中也可以隱式地使用變量，即不用聲明，直接使用。注意，JavaScript
總是把隱式聲明的變量當(dāng)成全局變量來使用。課題
１?JavaScript
語言基礎(chǔ)四、函數(shù)函數(shù)是指實(shí)現(xiàn)某一特定功能的小程序段，JavaScript
除了提供大量實(shí)用的內(nèi)部函數(shù)外，還允許用戶自定義函數(shù)。１.內(nèi)部函數(shù)２.自定義函數(shù)使用自定義函數(shù)分為兩個(gè)步驟:函數(shù)定義和函數(shù)調(diào)用。一般情況下在
<head>和</head>之間定義函數(shù)，在
<body>和
<body>之間調(diào)用函數(shù)。課題
１?JavaScript
語言基礎(chǔ)五、運(yùn)算符和優(yōu)先級(jí)表達(dá)式是用運(yùn)算符把常量、變量和函數(shù)連接起來的式子。一個(gè)表達(dá)式可以只包含一個(gè)常量或一個(gè)變量。運(yùn)算符可以是四則運(yùn)算符、關(guān)系運(yùn)算符、邏輯運(yùn)算符、復(fù)合運(yùn)算符等。在計(jì)算表達(dá)式的值時(shí)，按照運(yùn)算符的優(yōu)先級(jí)從高到低依次進(jìn)行計(jì)算。優(yōu)先級(jí)相同時(shí)，按照從左到右的順序進(jìn)行計(jì)算。使用()可以改變計(jì)算的順序。課題
１?JavaScript
語言基礎(chǔ)六、數(shù)組數(shù)組是相同類型的變量按順序組成的一種復(fù)合數(shù)據(jù)類型，這些相同類型的變量稱為數(shù)組元素。數(shù)組通過數(shù)組名加索引來使用數(shù)組的元素。１.
定義數(shù)組var變量
＝newArray(元素1，元素2，???，元素
n
)；２.引用數(shù)組數(shù)組名[索引]３.遍歷數(shù)組在使用數(shù)組時(shí)，經(jīng)常需要依次訪問數(shù)組中的每個(gè)元素，這種操作稱為數(shù)組的遍歷。JavaScript中數(shù)組遍歷最簡單的辦法是使用
for循環(huán)并用數(shù)組長度
“
數(shù)組名
.length”
作為
for循環(huán)最大限度值。除此之外也可以使用
for???in循環(huán)。課題
１?JavaScript
語言基礎(chǔ)七、語句１.
輸入與輸出語句(１)輸入(２)輸出使用
document.write()方法在瀏覽器窗口輸出，使用
alert()方法在對(duì)話框中輸出。２.選擇結(jié)構(gòu)語句選擇結(jié)構(gòu)是按照給定的邏輯條件來決定執(zhí)行的順序，有單向選擇、雙向選擇和多向選擇之分，但是程序在執(zhí)行過程中都只是執(zhí)行其中的一條分支。選擇語句分為
if條件語句和
switch語句。課題
１?JavaScript
語言基礎(chǔ)(１)if
條件語句if(條件語句){?執(zhí)行語句;}課題
１?JavaScript
語言基礎(chǔ)２)if???else語句if(條件){?語句1;}else{?語句2;}３)if???else
if???else語句if(條件1)課題
１?JavaScript
語言基礎(chǔ){?語句1;}elseif(條件2){?語句2;}else{?語句3;}課題
１?JavaScript
語言基礎(chǔ)(２)switch語句在
JavaScript中，switch語句也是選擇結(jié)構(gòu)中很常用的語句，功能與
if語句類似。switch語句用于將一個(gè)表達(dá)式同多個(gè)值進(jìn)行比較，并根據(jù)比較結(jié)果選擇執(zhí)行語句。語法格式如下:switch(表達(dá)式){?case值1:語句組1;break;?case值2:語句組2;break;?
…?case值
n:語句組
n;break;?default:語句組
n＋1;}課題
１?JavaScript
語言基礎(chǔ)３.循環(huán)結(jié)構(gòu)語句循環(huán)結(jié)構(gòu)可以實(shí)現(xiàn)將某一段代碼多次重復(fù)執(zhí)行，在
JavaScript中可以使用
for循環(huán)、for???in循環(huán)、while循環(huán)和
do???while循環(huán)四種。(１)for循環(huán)for循環(huán)語句是最常用的循環(huán)語句，一般用在循環(huán)次數(shù)已知的情況下。for(初始化表達(dá)式;循環(huán)條件;操作表達(dá)式){?循環(huán)體;}課題
１?JavaScript
語言基礎(chǔ)(２)for???in循環(huán)for???in循環(huán)用于遍歷數(shù)組或者對(duì)象的屬性，即對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作。for(變量
in對(duì)象){?循環(huán)體;}課題
１?JavaScript
語言基礎(chǔ)(３)while循環(huán)while循環(huán)在
“循環(huán)條件”
的值為真
(true)時(shí)執(zhí)行
“循環(huán)體”，否則結(jié)束循環(huán)。while(循環(huán)條件){?循環(huán)體;}課題
１?JavaScript
語言基礎(chǔ)(４)do???while循環(huán)do???while循環(huán)與
while循環(huán)類似，不同的是
do???while循環(huán)在判斷
“循環(huán)條件”
的值之前先執(zhí)行
“循環(huán)體”，也就是說至少會(huì)執(zhí)行一次
“循環(huán)體”。do{循環(huán)體;}while(循環(huán)條件);課題
２
?JavaScript對(duì)象化編程v
學(xué)習(xí)目標(biāo)１.
了解瀏覽器對(duì)象模型和文檔對(duì)象模型，掌握
JavaScript
中常用的對(duì)象和事件。２.
能利用
JavaScript
中對(duì)象的屬性、事件和方法，制作數(shù)字時(shí)鐘特效、動(dòng)態(tài)改變文本特效、打開新窗口特效、狀態(tài)欄打印機(jī)特效和在狀態(tài)欄設(shè)置日期時(shí)間特效。課題
２
?JavaScript對(duì)象化編程v相關(guān)知識(shí)JavaScript是基于對(duì)象
(Object－
Based)的編程語言?；趯?duì)象與面向?qū)ο?Object－Oriented)不同，它不提供抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的功能。基于對(duì)象的編程語言仍具有一些面向?qū)ο蟮幕咎卣?，可以根?jù)需要?jiǎng)?chuàng)建自己的對(duì)象，進(jìn)一步擴(kuò)大語言的應(yīng)用范圍，編寫出功能強(qiáng)大的
Web文檔。課題
２
?JavaScript對(duì)象化編程一、BOM
和DOM
結(jié)構(gòu)JavaScript
以
BOM
和
DOM
中定義的對(duì)象模型及操作方法為基礎(chǔ)，支持BOM
和
DOM
提供的對(duì)象模型，根據(jù)其對(duì)象模型層次結(jié)構(gòu)訪問目標(biāo)對(duì)象的屬性并對(duì)對(duì)象施加相應(yīng)的操作。BOM
是
BrowserOdjectModel的縮寫，即瀏覽器對(duì)象模型。BOM
提供獨(dú)立于頁面內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象。DOM是
DocumentOdjectModel的縮寫，即文檔對(duì)象模型。DOM是
W3C制定的標(biāo)準(zhǔn)。課題
２
?JavaScript對(duì)象化編程BOM中定義了六種重要的對(duì)象:(１)window對(duì)象表示瀏覽器中打開的窗口。(２)navigator對(duì)象包含了有關(guān)瀏覽器的信息。(３)location對(duì)象包含了瀏覽器當(dāng)前的
URL信息。(４)document對(duì)象表示瀏覽器中加載頁面的文檔對(duì)象。課題
２
?JavaScript對(duì)象化編程BOM
和
DOM
結(jié)構(gòu)課題
２
?JavaScript對(duì)象化編程(５)history對(duì)象包含了瀏覽器訪問網(wǎng)頁的歷史信息。(６)screen對(duì)象包含了客戶端顯示屏幕的信息。瀏覽器會(huì)為每一個(gè)網(wǎng)頁自動(dòng)創(chuàng)建
window對(duì)象、navigater對(duì)象、location對(duì)象、document對(duì)象、history對(duì)象和
screen對(duì)象。window對(duì)象位于瀏覽器所有對(duì)象的最頂層，其他五個(gè)對(duì)象都是該
window對(duì)象的子對(duì)象。課題
２
?JavaScript對(duì)象化編程二、JavaScript
對(duì)象在JavaScript中，對(duì)象是一種特殊的數(shù)據(jù)，擁有屬性和方法。屬性是指與對(duì)象有關(guān)的值，方法是指對(duì)象可以執(zhí)行的行為
(或者可以完成的功能)。屬性與方法的引用課題
２
?JavaScript對(duì)象化編程１.window對(duì)象window對(duì)象對(duì)應(yīng)
Web瀏覽器的窗口，使用它可以直接對(duì)瀏覽器窗口進(jìn)行操作。window對(duì)象提供的主要功能可以分為以下
5類:調(diào)整窗口的大小和位置、打開新窗口、系統(tǒng)提示框、狀態(tài)欄控制和定時(shí)操作。(１)調(diào)整窗口的大小和位置調(diào)整窗口的大小和位置的方法課題
２
?JavaScript對(duì)象化編程(２)打開新窗口window對(duì)象的
open()方法用于從一個(gè)窗口中新開一個(gè)窗口。(３)系統(tǒng)提示框系統(tǒng)提示框的方法課題
２
?JavaScript對(duì)象化編程(４)狀態(tài)欄控制window對(duì)象的
status屬性可設(shè)置或返回窗口狀態(tài)欄中的文本。瀏覽器狀態(tài)欄的顯示信息可以通過
window.status屬性直接進(jìn)行修改。設(shè)置在狀態(tài)欄中顯示文本的代碼如下:<script>?window.status="顯示文本在狀態(tài)欄!";</script>課題
２
?JavaScript對(duì)象化編程(５)定時(shí)操作定時(shí)操作的方法課題
２
?JavaScript對(duì)象化編程２.document對(duì)象document對(duì)象是
window對(duì)象的子對(duì)象，每個(gè)載入瀏覽器的
HTML文檔都會(huì)成為
document對(duì)象。document對(duì)象包含當(dāng)前文檔的信息，如標(biāo)題、背景顏色、表單、表格等。document對(duì)象常用于向?yàn)g覽器輸出內(nèi)容或者獲得當(dāng)前文檔中的信息。３.form對(duì)象form對(duì)象是
document對(duì)象的一個(gè)子對(duì)象，表示表單對(duì)象。一個(gè)文檔中的每一個(gè)表單都是獨(dú)立的、互不關(guān)聯(lián)的對(duì)象，document.formName或
document.forms[index]
用于獲取對(duì)某個(gè)form的引用，其中
index的值在
0到此文檔中的form數(shù)減
1之間。獲取指定的
form對(duì)象后，就可以使用它來獲取
form中的各個(gè)元素。課題
２
?JavaScript對(duì)象化編程４.screen對(duì)象screen對(duì)象包含有關(guān)客戶端顯示屏幕的信息。JavaScript程序可以利用這些信息優(yōu)化它們的輸出，以達(dá)到用戶的顯示要求。５.JavaScript核心對(duì)象JavaScript核心對(duì)象是
ECMAScript標(biāo)準(zhǔn)定義的一些對(duì)象與函數(shù)。課題
２
?JavaScript對(duì)象化編程JavaScript核心對(duì)象課題
２
?JavaScript對(duì)象化編程三、JavaScript
事件JavaScript常用事件課題
３?制作表單驗(yàn)證類特效v
學(xué)習(xí)目標(biāo)１.
能使用
JavaScript
函數(shù)實(shí)現(xiàn)表單驗(yàn)證。２.
能使用正則表達(dá)式實(shí)現(xiàn)即時(shí)提示錯(cuò)誤的表單驗(yàn)證。課題
３?制作表單驗(yàn)證類特效v相關(guān)知識(shí)JavaScript可以實(shí)現(xiàn)在數(shù)據(jù)被送往服務(wù)器前對(duì)
HTML
表單中的輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被
JavaScript
驗(yàn)證的典型表單數(shù)據(jù)包括:用戶是否已填寫表單中的必填項(xiàng)目、用戶輸入的郵件地址是否合法、用戶是否已輸入合法的日期、用戶是否在數(shù)據(jù)域中輸入了文本。課題
３?制作表單驗(yàn)證類特效一、表單１.表單的概念表單由一個(gè)或多個(gè)表單元素構(gòu)成，用于收集信息數(shù)據(jù)。<formaction=""method="post"id="frm"name="frm">???</form>常用的表單元素包括:文本框
(text)、密碼框
(password)、單選按鈕
(radio)、復(fù)選框(checkbox)、列表框
(<select>和
<option>)、按鈕
(button、submit和reset)和多行文本框
(<textarea>)。課題
３?制作表單驗(yàn)證類特效２.獲取表單元素的值document.表單名稱.表單元素名稱
.value３.判斷表單元素值是否滿足條件４.設(shè)置表單的
onsubmit提交事件５.this關(guān)鍵字如果在
JavaScript的
“
主程序”
中
(不在任何
function中，不在任何事件處理程序中)使用
this，它代表
window對(duì)象。如果在事件處理程序中使用
this，它代表發(fā)生事件的對(duì)象。課題
３?制作表單驗(yàn)證類特效二、正則表達(dá)式正則表達(dá)式
(RegularExpression)描述了強(qiáng)大的模式匹配和文本檢索與替換函數(shù)的方法，用于檢查字符串是否含有某子串、將匹配的子串進(jìn)行替換或者從某字符串抽取出符合條件的子串等。１.RegExp對(duì)象RegExp對(duì)象表示正則表達(dá)式，是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。(１)直接量語法/pattern/attributes(２)創(chuàng)建
RegExp對(duì)象的語法newRegExp(pattern，attributes)課題
３?制作表單驗(yàn)證類特效２.修飾符３.方括號(hào)４.元字符５.量詞６.RegExp對(duì)象屬性７.RegExp對(duì)象方法８.支持正則表達(dá)式的
String對(duì)象的方法９.正則表達(dá)式符號(hào)總表１０.常用正則表達(dá)式課題
３?制作表單驗(yàn)證類特效常用正則表達(dá)式課題
４?制作層切換和層提示特效v
學(xué)習(xí)目標(biāo)１.
能制作層切換特效。２.
能制作層提示特效。課題
４?制作層切換和層提示特效v相關(guān)知識(shí)一、getElementById
()方法getElementById()方法根據(jù)指定的
id屬性值獲取對(duì)象。假如對(duì)應(yīng)的為一組對(duì)象，則返回該組對(duì)象中的第一個(gè)，即
getElementById()方法可返回?fù)碛兄付?/p>
id的第一個(gè)對(duì)象的引用。在操作文檔的一個(gè)特定元素時(shí)，最好給該元素一個(gè)id屬性，在文檔中為它指定一個(gè)唯一的名稱，然后就可以用該
id查找想要的元素。Element＝document.getElementById(“id”);課題
４?制作層切換和層提示特效二、display
屬性display屬性設(shè)置元素如何顯示，其值為
“none”
時(shí)，元素不會(huì)被顯示；其值為
“block”時(shí)，元素將顯示為塊級(jí)元素，元素前后會(huì)帶有換行符。Object.style.display＝“none｜
block";課題
４?制作層切換和層提示特效三、層切換和層提示制作原理１.獲取對(duì)象，設(shè)置顯示屬性２.
初始時(shí)隱藏所有對(duì)象３.
顯示對(duì)象４.
隱藏對(duì)象５.
移入時(shí)顯示對(duì)象，移出時(shí)隱藏對(duì)象課題
５?制作菜單類特效v
學(xué)習(xí)目標(biāo)１.
能制作純
HTML
＋
CSS
的菜單特效。２.
能制作
JavaScript
＋
CSS
的菜單特效。課題
５?制作菜單類特效v相關(guān)知識(shí)一、導(dǎo)航菜單導(dǎo)航菜單是網(wǎng)頁設(shè)計(jì)中不可缺少的部分，是人們?yōu)g覽網(wǎng)站時(shí)從一個(gè)頁面轉(zhuǎn)到另一個(gè)頁面的快速通道。導(dǎo)航菜單的種類繁多，最基本的有三種形式:橫向?qū)Ш讲藛?、縱向?qū)Ш讲藛魏拖吕讲藛?。制作?dǎo)航菜單的技術(shù)有很多，可以采用純
HTML
＋
CSS
、JavaScript
＋CSS或
jQuery
等技術(shù)制作菜單特效。課題
５?制作菜單類特效二、HTML
＋
CSS二級(jí)菜單制作原理不使用
JavaScript，只使用
HTML
＋
CSS也能制作出精美的二級(jí)菜單特效，其原理是使用:hover偽類控制子選項(xiàng)的顯示與隱藏。１.增加專門用于控制導(dǎo)航菜單的
Div２.
一級(jí)菜單設(shè)置３.
二級(jí)菜單設(shè)置(１)二級(jí)菜單定位與隱藏(２)二級(jí)菜單顯示(３)二級(jí)菜單變換鏈接效果設(shè)置課題
５?制作菜單類特效三、JavaScript
＋
CSS二級(jí)菜單制作原理(１)每個(gè)一級(jí)菜單都對(duì)應(yīng)一個(gè)層，而這個(gè)層里存放著該一級(jí)菜單對(duì)應(yīng)的二級(jí)菜單。二級(jí)菜單排列形狀不同，就構(gòu)成了不同形式的菜單。如果排列成橫向，制作出來的就是橫向?qū)Ш讲藛?；如果排列成縱向，制作出來的就是縱向?qū)Ш讲藛巍?２)默認(rèn)情況下，二級(jí)菜單這個(gè)層是隱藏的。通過
<body>標(biāo)簽
onload事件調(diào)用初始化函數(shù)，在
CSS中將需要被隱藏層的
display屬性值設(shè)為
“none”，可以達(dá)到此目的。(３)當(dāng)鼠標(biāo)移入一級(jí)菜單時(shí)，對(duì)應(yīng)的二級(jí)菜單層顯示。在
JavaScript中通過鼠標(biāo)移入事件
onmouseover調(diào)用自定義的顯示層函數(shù)，將層的
display屬性值設(shè)為“block”。課題
５?制作菜單類特效(４)當(dāng)鼠標(biāo)從一級(jí)菜單中移開時(shí)，對(duì)應(yīng)的二級(jí)菜單層隱藏。在
Javascript中通過鼠標(biāo)移出事件
onmouseout調(diào)用自定義的隱藏層函數(shù)，將層的
display屬性值設(shè)為“none”。(５)鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單上時(shí)，二級(jí)菜單也不能隱藏，因此，對(duì)二級(jí)菜單必須將其設(shè)為:當(dāng)鼠標(biāo)移入時(shí)顯示當(dāng)前層，當(dāng)鼠標(biāo)移出時(shí)隱藏當(dāng)前層。課題
６?制作廣告類特效v
學(xué)習(xí)目標(biāo)１.
能制作路徑不固定、可關(guān)閉的漂浮廣告特效。２.
能制作可關(guān)閉的對(duì)聯(lián)廣告特效。３.
能制作帶數(shù)字導(dǎo)航的橫幅廣告特效。４.
能制作可折疊的商品分類廣告特效。課題
６?制作廣告類特效v相關(guān)知識(shí)一、路徑不固定的漂浮廣告漂浮廣告
(FloatingAdvertising)是指漂浮在網(wǎng)站首頁或各版塊、帖子等頁面的漂移形式的廣告。漂浮路徑示意圖課題
６?制作廣告類特效１.運(yùn)動(dòng)軌跡的控制２.
暫停與繼續(xù)移動(dòng)的控制３.
關(guān)閉的控制課題
６?制作廣告類特效二、對(duì)聯(lián)廣告對(duì)聯(lián)廣告是指利用網(wǎng)站頁面左右兩側(cè)的豎式廣告位而設(shè)計(jì)的廣告形式?？申P(guān)閉對(duì)聯(lián)廣告課題
６?制作廣告類特效１.在網(wǎng)站上掛對(duì)聯(lián)２.
對(duì)聯(lián)廣告隨頁面瀏覽跟隨移動(dòng)實(shí)現(xiàn)對(duì)聯(lián)廣告隨頁面瀏覽跟隨移動(dòng)特效，必須獲取當(dāng)前頁面的滾動(dòng)條縱坐標(biāo)，并根據(jù)用戶操作動(dòng)態(tài)調(diào)整滾動(dòng)條縱坐標(biāo)。課題
６?制作廣告類特效三、帶數(shù)字導(dǎo)航的橫幅廣告橫幅廣告
(BannerAd)是橫跨于網(wǎng)頁上的矩形公告牌，表現(xiàn)商家廣告內(nèi)容的圖片放置在頁面上，當(dāng)單擊這些橫幅的時(shí)候，通?？梢枣溄拥綇V告主的網(wǎng)頁。帶數(shù)字導(dǎo)航的橫幅廣告課題
６?制作廣告類特效１.輪播廣告２.
切換廣告四、可折疊的商品分類廣告在商品分類下，單擊某類商品可展開該分支，再次單擊該類商品可折疊該分支。可折疊的商品分類廣告課題
６?制作廣告類特效１.eval()函數(shù)２.
可折疊商品廣告核心代碼分析課題
7?制作滾動(dòng)類和日期類特效v
學(xué)習(xí)目標(biāo)１.
能制作無縫文字滾動(dòng)廣告特效。２.
能制作無縫圖片滾動(dòng)廣告特效。３.
能制作可手動(dòng)控制的無縫圖片滾動(dòng)廣告特效。４.
能制作日歷顯示特效。５.
能制作倒計(jì)時(shí)特效。課題
7?制作滾動(dòng)類和日期類特效v相關(guān)知識(shí)一、無縫文字滾動(dòng)廣告１.Marquee標(biāo)記的缺陷制作文字滾動(dòng)類特效時(shí)，可使用
Marquee標(biāo)記來實(shí)現(xiàn)文字在水平或垂直方向上的滾動(dòng)。在文字滾動(dòng)的過程中，總會(huì)有一段時(shí)間出現(xiàn)無滾動(dòng)文字的情況，這是使用
Marquee標(biāo)記制作文字滾動(dòng)類特效的一個(gè)缺陷。
為了彌補(bǔ)這個(gè)缺陷，可使用
Div層和
JavaScript腳本代碼實(shí)現(xiàn)廣告的無縫連續(xù)滾動(dòng)。課題
7?制作滾動(dòng)類和日期類特效２.無縫滾動(dòng)原理準(zhǔn)備滾動(dòng)課題
7?制作滾動(dòng)類和日期類特效滾動(dòng)中３.暫停與繼續(xù)滾動(dòng)設(shè)置一個(gè)實(shí)時(shí)器，當(dāng)鼠標(biāo)移入時(shí)清除定時(shí)器，達(dá)到暫停的目的。
當(dāng)鼠標(biāo)移出時(shí)，重新設(shè)置定時(shí)器，繼續(xù)滾動(dòng)。課題
7?制作滾動(dòng)類和日期類特效二、無縫圖片滾動(dòng)廣告無縫圖片滾動(dòng)廣告的工作原理與無縫文字滾動(dòng)廣告相同，區(qū)別是滾動(dòng)方向不同。
無縫文字滾動(dòng)廣告從下向上滾動(dòng)，無縫圖片滾動(dòng)廣告從右向左滾動(dòng)。滾動(dòng)到交界時(shí)還原課題
7?制作滾動(dòng)類和日期類特效制作無縫圖片滾動(dòng)廣告與制作無縫文字滾動(dòng)廣告有兩點(diǎn)不同:(１)需要把無縫文字滾動(dòng)源程序中的
offsetTop改成
offsetLef
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 餐飲業(yè)裝修購銷合同模板
- 科技館改造包工頭合同
- 烘焙店翻新外包合同樣本
- 活動(dòng)物品運(yùn)輸合同樣本
- 文化遺址銑刨料清運(yùn)項(xiàng)目
- 城市綠化帶渣土清理項(xiàng)目
- 科技園區(qū)基礎(chǔ)設(shè)施土方運(yùn)輸
- 家具電商貨運(yùn)合同
- 跨國農(nóng)業(yè)技術(shù)居間合同
- 兒童教育中心翻新合同模板
- 打造卓越的客戶體驗(yàn)
- 水環(huán)境治理研究的主要結(jié)果和貢獻(xiàn)分析
- 國際盲人節(jié)知識(shí)講座
- 旅行社安全規(guī)范
- 遼寧省沈陽市大東區(qū)2023-2024學(xué)年八年級(jí)上學(xué)期期末學(xué)情診斷英語試題
- 公共管理研究方法 課件 第11章 定性比較分析
- 2023人教版五年級(jí)數(shù)學(xué)上冊(cè)教學(xué)計(jì)劃含進(jìn)度表
- 血液透析患者的護(hù)理實(shí)踐
- 擴(kuò)張性心肌病的診治考試試題及答案
- 建設(shè)工程項(xiàng)目-月度安全檢查表
- 矩陣論智慧樹知到課后章節(jié)答案2023年下哈爾濱工程大學(xué)
評(píng)論
0/150
提交評(píng)論