單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效_第1頁(yè)
單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效_第2頁(yè)
單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效_第3頁(yè)
單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效_第4頁(yè)
單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效_第5頁(yè)
已閱讀5頁(yè)，還剩74頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

單元3設(shè)計(jì)文字類網(wǎng)頁(yè)特效JavaScript+jQuery網(wǎng)頁(yè)特效設(shè)計(jì)任務(wù)驅(qū)動(dòng)教程（第2版）名校名師精品系列教材人民郵電出版社學(xué)會(huì)設(shè)計(jì)文字類網(wǎng)頁(yè)特效熟悉HTMLDOM（文檔對(duì)象模型）熟悉JavaScript的位置與尺寸方法熟練使用JavaScript的循環(huán)語(yǔ)句熟練使用jQuery的選擇器熟練使用jQuery的鏈?zhǔn)讲僮魇炀毷褂胘Query的效果方法教學(xué)目標(biāo)pedagogicalobjectives目錄導(dǎo)航任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn)任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果任務(wù)3-8JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng)任務(wù)3-9jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中文字的JavaScript代碼如表3-1所示。序號(hào)程序代碼0102030405060708091011121314<scriptlanguage="javasript"type="text/javascript"><!--vartitleWord="品天下美景-飽您的眼福";varspeed=300vartitleChange=""+titleWord;functiontitleScroll(){if(titleChange.length<titleWord.length)titleChange+="-"+titleWord;titleChange=titleChange.substring(1,titleChange.length);document.title=titleChange.substring(0,titleWord.length);window.setTimeout("titleScroll()",speed);}//--></script>表3-1實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中文字的JavaScript代碼任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字表3-1中的代碼解釋如下。03行聲明變量titleWord的同時(shí)進(jìn)行賦值，該變量中存儲(chǔ)了標(biāo)題欄中滾動(dòng)的文字內(nèi)容“品天下美景-飽您的眼?！薄?4行聲明變量speed的同時(shí)進(jìn)行賦值，該變量中存儲(chǔ)了時(shí)間間隔300ms。05行聲明了一個(gè)變量titleChange，同時(shí)將連接表達(dá)式的值賦給該變量，即在字符串“品天下美景-飽您的眼福”的第1個(gè)字符前添加一個(gè)空格。06～12行定義了一個(gè)函數(shù)titleScroll()。由于在<body>標(biāo)簽中包含了代碼“onLoad="titleScroll()"”，即當(dāng)網(wǎng)頁(yè)文檔載入完成時(shí)觸發(fā)onLoad事件，第一次調(diào)用函數(shù)titleScroll()。按順序執(zhí)行11行的語(yǔ)句，每隔指定毫秒時(shí)間（此程序?yàn)?00ms）調(diào)用一次函數(shù)titleScroll()。目錄導(dǎo)航任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn)任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果任務(wù)3-8JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng)任務(wù)3-9jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告網(wǎng)頁(yè)0302.html中實(shí)現(xiàn)向上滾動(dòng)的促銷公告信息的HTML代碼如表3-2所示。序號(hào)程序代碼0102030405060708091011<divclass="note"><h3>促銷公告</h3><divclass="notelist"><ul><li><ahref="#"target="_blank">新iPadPro支持4K視頻輸出</a></li><li><ahref="#"target="_blank"class="red">谷歌公司推出萬(wàn)元x86平板</a></li><li><ahref="#"target="_blank">ROGG21迷你電競(jìng)主機(jī)發(fā)布</a></li><li><ahref="#"target="_blank"class="red">雷蛇近期更新兩款靈刃筆記本</a></li></ul></div></div>購(gòu)物網(wǎng)站的網(wǎng)頁(yè)中經(jīng)常會(huì)出現(xiàn)圖所示的向上滾動(dòng)的促銷公告信息。表3-2實(shí)現(xiàn)向上滾動(dòng)的促銷公告信息的HTML代碼任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告網(wǎng)頁(yè)0302.html中ul和li的CSS代碼如表3-3所示。序號(hào)程序代碼010203040506070809101112.noteul{width:200px;padding:015px;font-size:12px;line-height:30px;}.noteulli{height:30px;white-space:nowrap;width:200px;overflow:hidden;}表3-3網(wǎng)頁(yè)0302.html中ul和li的CSS代碼引用外部JS文件jquery.js的代碼如下所示。<scripttype="text/javascript"language="javascript"src="js/jquery.js"></script>任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告的JavaScript代碼如表3-4所示。序號(hào)程序代碼0102030405060708091011121314151617<scripttype="text/javascript">$(document).ready(function(){note();});functionnote(){varfns={_up:function(){$(".note>div>ul").stop().animate({marginTop:"-30px"},500,function(){$(".note>div>ul>li:lt(1)").appendTo($(".note>div>ul"));$(".note>div>ul").css("marginTop",0);});}};var_autoUp=null;表3-4實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告的JavaScript代碼任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告序號(hào)程序代碼18192021222324252627282930313233343536$(".note").mouseover(function(){autoStop2();});//鼠標(biāo)指針離開后再重新恢復(fù)自動(dòng)播放$(".note").mouseout(function(){_autoUp=setInterval(function(){fns._up();},1500);});varautoPlay2=function(){_autoUp=setInterval(function(){fns._up();},1500);//自動(dòng)播放};varautoStop2=function(){clearInterval(_autoUp);_autoUp=null;};autoPlay2();}</script>3.1JavaScript的循環(huán)語(yǔ)句如果希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)語(yǔ)句是很方便的，循環(huán)語(yǔ)句可以將代碼塊執(zhí)行指定的次數(shù)。對(duì)于數(shù)組num定義：varnum=[0,1,2,3,4,5];可以輸出數(shù)組的值如下。document.write(num[0]+"<br/>");document.write(num[1]+"<br/>");document.write(num[2]+"<br/>");document.write(num[3]+"<br/>");document.write(num[4]+"<br/>");document.write(num[5]+"<br/>");不過(guò)通常寫成如下形式。for(vari=0;i<num.length;i++){document.write(num[i]+"<br/>");}3.1JavaScript的循環(huán)語(yǔ)句JavaScript支持不同類型的循環(huán)，如下所列。當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊while循環(huán)當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊do...while循環(huán)循環(huán)的次數(shù)固定for循環(huán)循環(huán)遍歷對(duì)象的屬性。for...in循環(huán)3.1JavaScript的循環(huán)語(yǔ)句01OPTIONwhile循環(huán)while循環(huán)會(huì)在指定條件為真時(shí)循環(huán)執(zhí)行代碼塊，只要指定條件為true，循環(huán)就可以一直執(zhí)行代碼。while(條件){//需要執(zhí)行的代碼}do...while循環(huán)do...while循環(huán)是while循環(huán)的變體，該循環(huán)在檢查條件是否為真之前會(huì)執(zhí)行一次代碼塊，然后如果條件為真的話，就重復(fù)這個(gè)循環(huán)。do{//需要執(zhí)行的代碼}while(條件);02OPTION3.1JavaScript的循環(huán)語(yǔ)句for循環(huán)for循環(huán)的語(yǔ)法格式如下。for(表達(dá)式1;表達(dá)式2;表達(dá)式3){//被執(zhí)行的代碼塊}03OPTION表達(dá)式1：在循環(huán)（代碼塊）開始前執(zhí)行。表達(dá)式2：定義運(yùn)行循環(huán)（代碼塊）的條件。表達(dá)式3：在循環(huán)（代碼塊）被執(zhí)行之后執(zhí)行。先執(zhí)行“表達(dá)式1”，完成初始化；然后判斷“表達(dá)式2”的值是否為true，如果為true，則執(zhí)行“循環(huán)語(yǔ)句塊”，否則退出循環(huán)；執(zhí)行循環(huán)語(yǔ)句塊之后，執(zhí)行“表達(dá)式3”；然后重新判斷“表達(dá)式2”的值，若其值為true，再次重復(fù)執(zhí)行“循環(huán)語(yǔ)句塊”，如此循環(huán)執(zhí)行。3.1JavaScript的循環(huán)語(yǔ)句通常使用表達(dá)式1來(lái)初始化循環(huán)中所用的變量（vari=0）。表達(dá)式1是可選的，也就是說(shuō)，不使用表達(dá)式1也可以。010203表達(dá)式1通常表達(dá)式2用于判斷條件是否成立。表達(dá)式2通常表達(dá)式3會(huì)增加初始變量的值。表達(dá)式3也是可選的，其有多種用法。表達(dá)式33.1JavaScript的循環(huán)語(yǔ)句for...in循環(huán)JavaScript的for...in語(yǔ)句用于循環(huán)遍歷對(duì)象的屬性，for...in循環(huán)中的代碼塊將針對(duì)每個(gè)屬性執(zhí)行一次。for(對(duì)象中的變量){//要執(zhí)行的代碼}04OPTION使用while循環(huán)來(lái)顯示num數(shù)組中的所有值。比較while循環(huán)和for循環(huán)05OPTIONvarnum=[1,2,3,4];vari=0;while(num[i]){document.write(num[i]+"<br/>");i++;}3.1JavaScript的循環(huán)語(yǔ)句break語(yǔ)句break語(yǔ)句也可用于跳出循環(huán)，break語(yǔ)句跳出循環(huán)后，會(huì)繼續(xù)執(zhí)行該循環(huán)之后的代碼（如果有的話）。varx="";for(i=0;i<10;i++){if(i==3){break;}}06OPTIONcontinue語(yǔ)句continue語(yǔ)句用于跳過(guò)循環(huán)中的一個(gè)迭代。如果出現(xiàn)了指定的條件，就繼續(xù)執(zhí)行循環(huán)中的下一個(gè)迭代。varx="";for(i=0;i<=10;i++){if(i==3)continue;};07OPTION3.1JavaScript的循環(huán)語(yǔ)句JavaScript標(biāo)簽可以對(duì)JavaScript語(yǔ)句進(jìn)行標(biāo)記，如需標(biāo)記JavaScript語(yǔ)句，則在標(biāo)簽名稱后加上冒號(hào)。label:08OPTIONbreak語(yǔ)句和continue語(yǔ)句是僅僅能夠跳出代碼塊的語(yǔ)句。breaklabelname;continuelabelname;continue語(yǔ)句（帶有或不帶標(biāo)簽引用）只能用在循環(huán)中。break語(yǔ)句（不帶標(biāo)簽引用）只能用在循環(huán)或switch語(yǔ)句中。通過(guò)標(biāo)簽引用，break語(yǔ)句可用于跳出任何JavaScript代碼塊。3.2HTMLDOMDOM（DocumentObjectModel，文檔對(duì)象模型）是用以訪問(wèn)HTML元素的正式W3C標(biāo)準(zhǔn)，HTMLDOM定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法，通過(guò)HTMLDOM，可以訪問(wèn)HTML文檔的所有元素。HTMLDOM獨(dú)立于平臺(tái)和語(yǔ)言，可被任何編程語(yǔ)言使用，如Java、JavaScript和VBscript。當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。3.2HTMLDOM文檔對(duì)象中每個(gè)元素都是一個(gè)節(jié)點(diǎn)。如下所列。整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)01每一個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)02包含在HTML元素中的文本是文本節(jié)點(diǎn)03每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)04注釋屬于注釋節(jié)點(diǎn)053.2HTMLDOMHTML文檔中的所有節(jié)點(diǎn)構(gòu)成了一棵節(jié)點(diǎn)樹，HTML文檔中的每個(gè)元素、屬性和文本都代表樹中的一個(gè)節(jié)點(diǎn)。該樹起始于文檔節(jié)點(diǎn)，并由此伸出多個(gè)分支，直到文本節(jié)點(diǎn)為止。<html><head><title>文檔標(biāo)題</title></head><body><h1>我的標(biāo)題</h1><ahref="#">我的鏈接</a></body></html>可以表示成一個(gè)倒立的節(jié)點(diǎn)樹，如圖所示。3.2HTMLDOMHTML文檔的節(jié)點(diǎn)樹中各個(gè)節(jié)點(diǎn)彼此之間存在等級(jí)關(guān)系，即節(jié)點(diǎn)之間具有父子關(guān)系。<head>和<body>的父節(jié)點(diǎn)是<html>，文本節(jié)點(diǎn)“我的標(biāo)題”的父節(jié)點(diǎn)是<h1>。<head>節(jié)點(diǎn)的子節(jié)點(diǎn)為<title>，<title>節(jié)點(diǎn)的子節(jié)點(diǎn)為文本節(jié)點(diǎn)“文檔標(biāo)題”。當(dāng)節(jié)點(diǎn)的父節(jié)點(diǎn)為同一個(gè)節(jié)點(diǎn)時(shí)，它們就是同級(jí)節(jié)點(diǎn)。例如，<a>和<h1>為同級(jí)節(jié)點(diǎn)，其父節(jié)點(diǎn)是<body>。節(jié)點(diǎn)可以擁有后代，后代是指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推。節(jié)點(diǎn)也可以擁有先輩，先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。訪問(wèn)父節(jié)點(diǎn)使用parentNode()方法或者parentElement()方法，訪問(wèn)第一個(gè)子節(jié)點(diǎn)使用firstChild屬性或者childNodes[0]，訪問(wèn)最后一個(gè)子節(jié)點(diǎn)使用lastChild屬性或者childNodes[childNodes.length-1]，訪問(wèn)同級(jí)的下一個(gè)節(jié)點(diǎn)使用nextSibling屬性，訪問(wèn)同級(jí)的上一個(gè)節(jié)點(diǎn)使用previousSibling屬性。3.2HTMLDOM通過(guò)可編程的對(duì)象模型，JavaScript能夠創(chuàng)建動(dòng)態(tài)的HTML。01JavaScript能夠改變頁(yè)面中的所有HTML元素JavaScript能夠改變頁(yè)面中的所有HTML屬性02JavaScript能夠改變頁(yè)面中的所有CSS樣式03JavaScript能夠?qū)?yè)面中的所有事件做出反應(yīng)043.2HTMLDOM01OPTION查找HTML元素通過(guò)id查找HTML元素在DOM中查找HTML元素最簡(jiǎn)單的方法是使用getElementById()方法，通過(guò)使用元素的id來(lái)返回元素。document.getElementById("id標(biāo)記名稱")通過(guò)標(biāo)簽名查找HTML元素語(yǔ)法格式如下。document.getElementsByTagName("標(biāo)記名稱")document.getElementById("id").getElementsByTagName("標(biāo)記名稱")通過(guò)類名找到HTML元素語(yǔ)法格式如下。document.getElementsByName("控件名稱")3.2HTMLDOM改變HTML元素的內(nèi)容HTMLDOM允許JavaScript改變HTML元素的內(nèi)容，修改HTML內(nèi)容最簡(jiǎn)單的方法是使用innerHTML屬性。02OPTIONdocument.getElementById(id).innerHTML=newHTML也可以寫成以下形式。varelement=document.getElementById("demo");element.innerHTML="Newtext";使用document.getElementById(id).innerHTML還可以獲取HTML元素的內(nèi)容，使用以下形式也能獲取HTML元素的內(nèi)容。document.getElementById(id).getAttribute("innerHTML")3.2HTMLDOM改變HTML元素的屬性語(yǔ)法格式如下。03OPTIONdocument.getElementById(id).屬性名稱="屬性值"document.getElementById(id).setAttribute(屬性名稱,"屬性值")例如，更改<img>元素的src屬性：<imgid="image"src="title01.gif">document.getElementById("image").src="title02.gif";改變HTML元素的樣式語(yǔ)法格式如下。document.getElementById(id).perty=newstyle04OPTION3.2HTMLDOM創(chuàng)建新的HTML元素如果需要向HTMLDOM添加新元素，則必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。創(chuàng)建HTML標(biāo)記對(duì)象的語(yǔ)法格式：document.createElement("標(biāo)記名稱");05OPTION創(chuàng)建文本節(jié)點(diǎn)的語(yǔ)法格式：document.createTextNode("文本內(nèi)容");創(chuàng)建新屬性節(jié)點(diǎn)的語(yǔ)法格式：document.createAttribute("屬性名稱");在已有HTML元素中添加新元素的語(yǔ)法格式：element.appendChild(元素名稱);3.2HTMLDOM刪除已有的HTML元素如需刪除HTML元素，則必須首先獲得該元素的父元素，例如：<divid="div1"><pid="p1">這是一個(gè)段落。</p><pid="p2">這是另一個(gè)段落。</p></div><script>varparent=document.getElementById("div1");//找到id="div1"的元素varchild=document.getElementById("p1");//找到id="p1"的<p>元素parent.removeChild(child);//從父元素中刪除子元素</script>06OPTION也可以使用元素的parentNode屬性來(lái)找到其父元素，例如：varchild=document.getElementById("p1");child.parentNode.removeChild(child);3.3JavaScript的位置與尺寸方法3.3.1網(wǎng)頁(yè)元素的寬度和高度尺寸01OPTION瀏覽器窗口的尺寸大小和網(wǎng)頁(yè)的尺寸大小通常情況下，網(wǎng)頁(yè)的尺寸大小由網(wǎng)頁(yè)內(nèi)容和CSS樣式表決定。瀏覽器窗口的大小是指在瀏覽器窗口中看到的那部分網(wǎng)頁(yè)區(qū)域，又叫作視口（viewport），瀏覽器的視口不包括工具欄和滾動(dòng)條。對(duì)于InternetExplorer、Chrome、Firefox、Opera以及Safar，window.innerHeight表示瀏覽器窗口的內(nèi)部高度，window.innerWidth表示瀏覽器窗口的內(nèi)部寬度。innerHeight和innerWidth屬性3.3JavaScript的位置與尺寸方法clientHeight和clientWidth屬性document.documentElement.clientHeight或者document.body.clientHeight表示瀏覽器窗口的高度，document.documentElement.clientWidth或者document.body.clientWidth表示瀏覽器窗口的寬度。網(wǎng)頁(yè)中的每個(gè)元素都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding所占據(jù)的視覺(jué)面積，不包括border和滾動(dòng)條占用的空間，如圖所示。3.3JavaScript的位置與尺寸方法document.body.offsetWidth表示網(wǎng)頁(yè)可見區(qū)域的寬度，包括邊線的寬度；document.body.offsetHeight表示網(wǎng)頁(yè)可見區(qū)域的高度，包括邊線的寬度。offsetHeight和offsetWidth屬性頁(yè)面元素的offsetWidth屬性是指頁(yè)面元素自身的寬度，單位為像素；頁(yè)面元素的offsetHeight屬性是指頁(yè)面元素自身的高度，單位為像素。scrollHeight和scrollWidth屬性scrollWidth用于獲取網(wǎng)頁(yè)元素的滾動(dòng)寬度，scrollHeight用于獲取網(wǎng)頁(yè)元素的滾動(dòng)高度。3.3JavaScript的位置與尺寸方法瀏覽器窗口的尺寸大小和網(wǎng)頁(yè)的尺寸大小window.screen.height用于獲取屏幕分辨率的高度，window.screen.width用于獲取屏幕分辨率的寬度。02OPTION<script>varw=window.screen.width;varh=window.screen.height;document.write("屏幕分辨率寬度為："+w+"，高度為："+h+"。<br/>");</script>屏幕可用工作區(qū)的高度和寬度window.screen.availHeight用于獲取屏幕可用工作區(qū)的高度，window.screen.availWidth用于獲取屏幕可用工作區(qū)的寬度。<script>varw=window.screen.availWidth;varh=window.screen.availHeight;document.write("屏幕可用工作區(qū)寬度為："+w+"，高度為："+h+"。<br/>");</script>03OPTION3.3JavaScript的位置與尺寸方法3.3.2網(wǎng)頁(yè)元素的位置01OPTIONoffsetLeft和offsetTop屬性網(wǎng)頁(yè)元素的絕對(duì)位置是指該元素的左上角相對(duì)于整個(gè)網(wǎng)頁(yè)左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過(guò)計(jì)算才能得到。首先，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離。其中offsetTop屬性可以獲取頁(yè)面元素距離頁(yè)面上方或父容器上方的距離，offsetLeft屬性可以獲取頁(yè)面元素距離頁(yè)面左方或父容器左方的距離，單位都為像素。3.3JavaScript的位置與尺寸方法scrollLeft和scrollTop屬性網(wǎng)頁(yè)元素的相對(duì)位置是指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。有了絕對(duì)位置以后，獲得相對(duì)位置就很容易了，只要將絕對(duì)坐標(biāo)減去頁(yè)面的滾動(dòng)條滾動(dòng)的距離就可以了。通過(guò)document對(duì)象的scrollTop屬性可以設(shè)置或獲取位于頁(yè)面元素最頂端和窗口中可見內(nèi)容最頂端之間的距離。通過(guò)document對(duì)象的scrollLeft屬性可以設(shè)置或獲取位于頁(yè)面元素左邊界和窗口中目前可見內(nèi)容的最左端之間的距離，如圖所示。02OPTION3.3JavaScript的位置與尺寸方法screenTop和screenLeft屬性window對(duì)象的screenTop屬性可以獲取網(wǎng)頁(yè)內(nèi)容的左邊距，window對(duì)象的screenLeft屬性可以獲取網(wǎng)頁(yè)內(nèi)容的上邊距。03OPTION<script>varleft=window.screenTop;vartop=window.screenLeft;document.write("網(wǎng)頁(yè)內(nèi)容的左邊距為："+left+"，上邊距為："+top+"。<br/>");</script>screenTop和screenLeft屬性使用getBoundingClientRect()方法可以立刻獲得網(wǎng)頁(yè)元素的位置，該方法返回一個(gè)對(duì)象，其中包含left、right、top和bottom4個(gè)屬性，分別對(duì)應(yīng)該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。04OPTION3.3JavaScript的位置與尺寸方法網(wǎng)頁(yè)元素的相對(duì)位置就是：varX=document.getElementById("demo").getBoundingClientRect().left;varY=document.getElementById("demo").getBoundingClientRect().top;再加上滾動(dòng)距離，就可以得到絕對(duì)位置：varX=document.getElementById("demo").getBoundingClientRect().left+document.documentElement.scrollLeft;varY=document.getElementById("demo").getBoundingClientRect().top+document.documentElement.scrollTop;3.3JavaScript的位置與尺寸方法3.3.3通過(guò)網(wǎng)頁(yè)元素的樣式屬性style獲取或設(shè)置元素的尺寸和位置01OPTIONstyle.left該屬性定位頁(yè)面元素與包含它的容器左邊界的偏移量。left屬性的返回值是包含單位的字符串，是獲取HTML中l(wèi)eft的值，如果沒(méi)有就是空串。style.pixelLeft該屬性返回定位頁(yè)面元素左邊界偏移量的整數(shù)像素值，由于style.left屬性返回的是包含單位的字符串，如30px。而pixelLeft屬性返回的是數(shù)值，是將left的值（如果是空串則賦值為0）轉(zhuǎn)換為像素值。02OPTIONstyle.posLeft該屬性返回定位頁(yè)面元素左邊界偏移量的數(shù)量值，不管相應(yīng)的樣式表元素指定什么單位，由于style.left返回的是包含單位的字符串，如1.2em。posLeft屬性就是將left的值轉(zhuǎn)換為數(shù)值類型，而且是浮點(diǎn)型。03OPTION3.4jQuery的選擇器jQuery的選擇器就是“選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作”，使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式放進(jìn)構(gòu)造函數(shù)jQuery()（簡(jiǎn)寫為$），然后得到被選中的元素。jQuery的選擇器允許對(duì)元素組或單個(gè)元素進(jìn)行操作。jQuery元素選擇器和屬性選擇器通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì)HTML元素進(jìn)行選擇。jQuery使用CSS選擇器來(lái)選取HTML元素，使用路徑表達(dá)式來(lái)選擇帶有給定屬性的元素。3.4jQuery的選擇器選擇表達(dá)式可以是CSS選擇器，示例代碼如下所示。$(document)//選擇整個(gè)文檔對(duì)象$('#myId’)//選擇ID為myId的網(wǎng)頁(yè)元素$('div.myClass’)//選擇class為myClass的<div>元素$('input[name=first]’)//選擇name屬性等于first的<input>元素也可以是jQuery特有的表達(dá)式，示例代碼如下所示。$('a:first’)//選擇網(wǎng)頁(yè)中第1個(gè)a元素$('tr:odd’)//選擇表格的奇數(shù)行$('#myForm:input’)//選擇表單中的<input>元素$('div:visible’)//選擇可見的<div>元素$('div:gt(2)’)//選擇所有的<div>元素，除了前3個(gè)$('div:animated’)//選擇當(dāng)前處于動(dòng)畫狀態(tài)的<div>元素3.4jQuery的選擇器如果選中多個(gè)元素，jQuery提供過(guò)濾器，可以縮小結(jié)果集，示例代碼如下所示。$('div').has('p’)//選擇包含<p>元素的<div>元素$('div').not('.myClass’)//選擇class不等于myClass的<div>元素$('div').filter('.myClass’)//選擇class等于myClass的<div>元素$('div').first()//選擇第1個(gè)<div>元素$('div').eq(5)//選擇第6個(gè)<div>元素有時(shí)候，用戶需要從結(jié)果集出發(fā)，移動(dòng)到附近的相關(guān)元素，jQuery也提供了在DOM樹上移動(dòng)的方法，示例代碼如下所示。$('div').next('p’)//選擇<div>元素后面的第1個(gè)<p>元素$('div').parent()//選擇<div>元素的父元素$('div').closest('form’)//選擇離<div>最近的<form>父元素$('div').children()//選擇<div>的所有子元素$('div').siblings()//選擇<div>的同級(jí)元素3.5jQuery的鏈?zhǔn)讲僮鱦Query有一種名為鏈接（chaining）的技術(shù)，允許用戶在相同的元素上運(yùn)行多條jQuery命令，允許將所有操作連接在一起，以鏈條的形式寫出來(lái)。鏈接是一種在同一對(duì)象上執(zhí)行多個(gè)任務(wù)的便捷方法。jQuery會(huì)拋掉多余的空格，并按照一行長(zhǎng)代碼來(lái)執(zhí)行上面的代碼行。這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個(gè)動(dòng)作，只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上即可。$("#demo").css("color","red").slideUp(2000).slideDown(2000);如果需要，也可以添加多個(gè)方法調(diào)用。3.6jQuery的效果方法jQuery的效果主要包括隱藏、顯示、切換、淡入淡出、滑動(dòng)和動(dòng)畫效果等。許多jQuery函數(shù)涉及動(dòng)畫，這些函數(shù)也許會(huì)將speed或duration作為可選參數(shù)。speed或duration參數(shù)可以設(shè)置許多不同的值，如"slow"、"fast"、"normal"或毫秒數(shù)。jQuery常用的效果方法的比較說(shuō)明如表3-5所示。效果方法名稱功能說(shuō)明hide()和show()同時(shí)改變多個(gè)樣式屬性，包括高度、寬度和不透明度f(wàn)adeIn()和fadeOut()只改變不透明度slideUp()和slideDown()只改變高度f(wàn)adeTo()只改變不透明度toggle()用來(lái)代替hide()方法和show()方法，所以會(huì)同時(shí)修改多個(gè)樣式屬性，包括高度、寬度和不透明度slideToggle()用來(lái)代替slideUp()方法和slideDown()方法，只能改變高度animate()animate()屬于自定義動(dòng)畫的方法，以上各種動(dòng)畫方法實(shí)質(zhì)內(nèi)部都調(diào)用了animate()方法。此外，直接使用animate()方法還能自定義其他的樣式屬性，如left、marginLeft、scrollTop等3.6jQuery的效果方法01OPTION實(shí)現(xiàn)頁(yè)面元素的隱藏和顯示效果在jQuery中，可以使用hide()和show()方法來(lái)隱藏和顯示HTML元素。jQuery的hide()方法和show()方法jQuery的toggle()方法在jQuery中，可以使用toggle()方法來(lái)切換hide()和show()方法，顯示被隱藏的元素，或者隱藏已顯示的元素。$(selector).hide(speed,callback);$(selector).show(speed,callback);speed為可選的參數(shù)，指定隱藏或顯示的速度，可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選的參數(shù)，為隱藏或顯示效果完成后所執(zhí)行的函數(shù)名稱。$(selector).toggle(speed,callback);speed為可選的參數(shù)，指定隱藏或者顯示的速度，可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選的參數(shù)，為切換隱藏和顯示效果完成后所執(zhí)行的函數(shù)名稱。3.6jQuery的效果方法實(shí)現(xiàn)頁(yè)面元素的淡入淡出效果jQuery的fadeIn()方法用于淡入已隱藏的元素，在指定的一段時(shí)間內(nèi)增加元素的不透明度，直到元素完全可見。（1）jQuery的fadeIn()方法（2）jQuery的fadeOut()方法jQuery的fadeOut()方法用于淡出可見元素，在指定的一段時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失。$(selector).fadeIn(speed,callback);speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為淡入效果完成后所執(zhí)行的函數(shù)名稱。$(selector).fadeOut(speed,callback);speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為淡出效果完成后所執(zhí)行的函數(shù)名稱。02OPTION3.6jQuery的效果方法jQuery的fadeToggle()方法可以在fadeIn()與fadeOut()方法之間切換。如果元素已淡出，則fadeToggle()會(huì)向元素添加淡入效果；如果元素已淡入，則fadeToggle()會(huì)向元素添加淡出效果。（3）jQuery的fadeToggle()方法$(selector).fadeToggle(speed,callback);speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為切換淡入和淡出效果完成后所執(zhí)行的函數(shù)名稱。（4）jQuery的fadeTo()方法jQuery的fadeTo()方法允許漸變?yōu)榻o定的不透明度（值為0～1）。$(selector).fadeTo(speed,opacity,callback);speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。opacity為必需參數(shù)，將淡入淡出效果設(shè)置為給定的不透明度（值為0～1）。callback為可選參數(shù)，為該漸變效果完成后所執(zhí)行的函數(shù)名稱。3.6jQuery的效果方法實(shí)現(xiàn)頁(yè)面元素的滑動(dòng)效果jQuery的slideDown()方法用于向下滑動(dòng)元素。（1）jQuery的slideDown()方法（2）jQuery的slideUp()方法jQuery的slideUp()方法用于向上滑動(dòng)元素。$(selector).slideDown(speed,callback);其中speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為向下滑動(dòng)效果完成后所執(zhí)行的函數(shù)名稱。$(selector).slideUp(speed,callback);其中speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為向下滑動(dòng)效果完成后所執(zhí)行的函數(shù)名稱。03OPTION3.6jQuery的效果方法jQuery的slideToggle()方法可以在slideDown()與slideUp()方法之間切換。如果元素向下滑動(dòng)，則slideToggle()可向上滑動(dòng)它們；如果元素向上滑動(dòng)，則slideToggle()可向下滑動(dòng)它們。（3）jQuery的slideToggle()方法$(selector).slideToggle(speed,callback);其中，speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為切換向上和向下滑動(dòng)效果完成后所執(zhí)行的函數(shù)名稱。實(shí)現(xiàn)頁(yè)面元素的動(dòng)畫效果04OPTIONjQuery的animate()方法用于創(chuàng)建自定義動(dòng)畫。（1）jQuery的animate()方法$(selector).animate({params},speed,callback);其中params為必需參數(shù)，用于定義形成動(dòng)畫的CSS屬性。speed為可選參數(shù)，指定效果的時(shí)長(zhǎng)，它可以取以下值："slow"、"fast"或毫秒數(shù)。callback為可選參數(shù)，為動(dòng)畫效果完成后所執(zhí)行的函數(shù)的名稱。3.6jQuery的效果方法（2）使用animate()方法操作多個(gè)屬性在使用animate()方法生成動(dòng)畫的過(guò)程中可同時(shí)使用多個(gè)屬性。$("button").click(function(){$("#demo").animate({left:'250px’,opacity:'0.5’,height:'150px’,width:'150px’});});在使用animate()方法生成動(dòng)畫的過(guò)程中可以定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值），此時(shí)需要在值的前面加上+=或-=，表示相對(duì)于當(dāng)前設(shè)置值的累加或者累減。（3）使用相對(duì)值實(shí)現(xiàn)動(dòng)畫效果3.6jQuery的效果方法（4）使用預(yù)定義的值實(shí)現(xiàn)動(dòng)畫效果可以把動(dòng)畫的屬性值設(shè)置為'show'、'hide'或'toggle'。$("button").click(function(){$("#demo").animate({height:'toggle’//在顯示與隱藏之間切換});});jQuery提供針對(duì)動(dòng)畫的隊(duì)列功能，這意味著如果在彼此之后編寫多個(gè)animate()調(diào)用，jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列，然后逐一運(yùn)行這些animate()調(diào)用。由于animate()方法都是對(duì)同一個(gè)jQuery對(duì)象進(jìn)行操作，所以多個(gè)animate()調(diào)用也可以改為鏈?zhǔn)降膶懛?。?）使用隊(duì)列功能實(shí)現(xiàn)動(dòng)畫效果3.6jQuery的效果方法停止動(dòng)畫jQuery的stop()方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。stop()方法適用于所有jQuery效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。語(yǔ)法格式如下。$(selector).stop(stopAll,goToEnd);其中stopAll為可選參數(shù)，指定是否應(yīng)該清除動(dòng)畫隊(duì)列，其默認(rèn)值是false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。如果設(shè)置為true，則會(huì)清空動(dòng)畫隊(duì)列，尚未執(zhí)行完的動(dòng)畫也會(huì)停止。goToEnd為可選參數(shù)，指定是否立即終止當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài)，其默認(rèn)值是false。如果設(shè)置為true，則立即終止當(dāng)前動(dòng)畫，讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài)。05OPTION3.6jQuery的效果方法jQuery的callback函數(shù)由于JavaScript語(yǔ)句（指令）是逐一執(zhí)行的，按照次序，動(dòng)畫之后的語(yǔ)句可能會(huì)產(chǎn)生錯(cuò)誤或頁(yè)面沖突，因?yàn)閯?dòng)畫還沒(méi)有完成。為了避免這種情況，可以以參數(shù)的形式添加callback函數(shù)。在動(dòng)畫100%完成后，即調(diào)用callback函數(shù)。如果希望在一個(gè)涉及動(dòng)畫的函數(shù)之后來(lái)執(zhí)行語(yǔ)句，則使用callback函數(shù)。$(selector).hide(speed,callback)callback參數(shù)是一個(gè)隱藏效果完成后被執(zhí)行的函數(shù)。06OPTION目錄導(dǎo)航任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn)任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果任務(wù)3-8JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng)任務(wù)3-9jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果讓網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果，以吸引瀏覽者的注意力?！救蝿?wù)描述】【思路探析】每隔一定的時(shí)間段，從字符串截取1個(gè)字符，這些字符依次在網(wǎng)頁(yè)狀態(tài)欄中顯示，從而呈現(xiàn)打字效果。如果所有的字符都顯示后，重新從第1個(gè)字符開始。【特效實(shí)現(xiàn)】實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中文字呈現(xiàn)打字效果的JavaScript代碼如表所示。序號(hào)程序代碼01020304050607080910111213141516<scriptlanguage="JavaScript"type="text/javascript">varmsg="歡迎光臨網(wǎng)頁(yè)特效網(wǎng)";varinterval=220//間隔時(shí)間varseq=0;functionstatuShow(){len=msg.length;//字符串長(zhǎng)度window.status=msg.substring(0,seq+1);seq++;if(seq>=len){seq=0;window.status=‘’;}window.setTimeout("statuShow();",interval);}statuShow();</script>目錄導(dǎo)航任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn)任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果任務(wù)3-8JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng)任務(wù)3-9jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果在網(wǎng)頁(yè)中實(shí)現(xiàn)向上滾動(dòng)網(wǎng)頁(yè)文字，并且呈現(xiàn)滾動(dòng)與等待的交替效果，其外觀效果如圖所示?！救蝿?wù)描述】【思路探析】通過(guò)頁(yè)面元素的scrollTop屬性可以設(shè)置或獲取頁(yè)面元素最頂端與窗口中可見內(nèi)容的最頂端之間的距離，不斷改變頁(yè)面元素的scrollTop屬性值就可以形成滾動(dòng)效果。通過(guò)設(shè)置setTimeout()方法的時(shí)間間隔參數(shù)，可以形成網(wǎng)頁(yè)文字滾動(dòng)和等待的交替效果。任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果【特效實(shí)現(xiàn)】實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與停止的交替效果的HTML代碼如表所示。序號(hào)程序代碼01020304050607080910111213141516171819<tableheight="24"cellSpacing="0"cellPadding="0"border="0"><tbody><tr><tdwidth="275"background="images/01.gif"><divid="mq"style="overflow:hidden;height:24px"onmouseover=iScrollAmount=0onmouseout=iScrollAmount=1><tableclass="ctl"cellSpacing="0"cellPadding="0"width="275"border="0"><tbody><tr><td><li>關(guān)于做好我省普通高等學(xué)校招生工作的通知</li></td></tr><tr><td><li>關(guān)于做好我省普通高等學(xué)校對(duì)口招生工作的通知</li></td></tr><tr><td><li>關(guān)于做好我省技能競(jìng)賽工作的通知</li></td></tr><tr><td><li>關(guān)于做好我省職稱評(píng)定工作的通知</li></td></tr></tbody></table></div></td></tr></tbody></table>任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果的JavaScript代碼如表所示。序號(hào)程序代碼010203040506070809101112131415161718<script>varoMarquee=document.getElementById("mq");//滾動(dòng)對(duì)象variLineHeight=24;//單行高度，像素variLineCount=4;//實(shí)際行數(shù)variScrollAmount=1;//每次滾動(dòng)高度，像素functionrun(){oMarquee.scrollTop+=iScrollAmount;if(oMarquee.scrollTop==iLineCount*iLineHeight)oMarquee.scrollTop=0;if(oMarquee.scrollTop%iLineHeight==0){window.setTimeout("run()",2000);}else{window.setTimeout("run()",50);}}oMarquee.innerHTML+=oMarquee.innerHTML;window.setTimeout("run()",2000);</script>目錄導(dǎo)航任務(wù)3-1JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字任務(wù)3-3JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果任務(wù)3-6JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn)任務(wù)3-2jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告任務(wù)3-4JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果任務(wù)3-7jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果任務(wù)3-8JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng)任務(wù)3-9jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果當(dāng)鼠標(biāo)指針指向網(wǎng)頁(yè)中的公告信息時(shí)，動(dòng)態(tài)改變顯示內(nèi)容及外觀效果，其外觀效果如圖所示。【任務(wù)描述】【思路探析】通過(guò)設(shè)置頁(yè)面元素style.display的值為block或者none，控制其顯示或隱藏，從而實(shí)現(xiàn)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果。任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果【特效實(shí)現(xiàn)】實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果的HTML代碼如表所示。序號(hào)程序代碼0102030405060708091011121314151617181920<divstyle="background:#FFF;padding:10px;"><divclass="changeList"><divclass="changeList-top"></div><dl><dtid="b1"style="display:none"onmouseover="changebox(1);"><p>網(wǎng)站公告……</p><em><imgsrc="images/shu1.gif"width="29"height="37"/></em></dt><ddid="a1"><h1><imgsrc="images/shu1_1.gif"width="29"height="49"/></h1><divclass="changeListText"><ahref=""target="_blank">……</a></div></dd></dl><dl><dtid="b2"onmouseover="changebox(2);"><p>網(wǎng)頁(yè)特效集錦……</p><em><imgsrc="images/shu2.gif"width="29"height="37"/></em></dt><ddid="a2"style="display:none;"><h1><imgsrc="images/shu1_2.gif"width="29"height="49"/></h1><divclass="changeListText"><ahref=""target="_blank">……</a></div></dd>任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果序號(hào)程序代碼2122232425262728293031323334353637</dl><dl><dtid="b3"onmouseover="changebox(3);"><p>新聞列表滑過(guò)網(wǎng)頁(yè)特效……</p><em><imgsrc="images/shu3.gif"width="29"height="37"/></em></dt><ddid="a3"style="display:none;"><h1><imgsrc="images/shu1_3.gif"width="29"height="49"/></h1><divclass="changeListText"><ahref=""target="_blank">……</a></div></dd></dl><dl><dtid="b4"onmouseover="changebox(4);"><p>鼠標(biāo)滑過(guò)改變標(biāo)簽內(nèi)容……</p><em><imgsrc="images/shu4.gif"width="29"height="37"/></em></dt><ddid="a4"style="display:none;"><h1><imgsrc="images/shu1_4.gif"width="29"height="49"/></h1><divclass="changeListText"><ahref=""target="_blank">……</a></div>任務(wù)3-5JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果序號(hào)程序代碼38394041424344454647484950</dd></dl>

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論