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

下載本文檔

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

文檔簡介

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

溫馨提示

  • 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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論