網(wǎng)頁設(shè)計基礎(chǔ)與實戰(zhàn)課件

上傳人：1*** IP屬地：廣東上傳時間：2025-02-16 格式：PPTX 頁數(shù)：53 大?。?.55MB 積分：30 舉報 版權(quán)申訴

已閱讀5頁，還剩48頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第9章JavaScript特效9.1制作緩動動畫9.2實現(xiàn)頁面滾動9.3使用event對象了解JavaScript的3大家族了解event事件對象的使用掌握offset家族、scroll家族和client家族中的各個屬性掌握勻速和緩動動畫的運用引言JavaScript的3大家族主要是offset家族、scroll家族和client家族，3大家族都是以DOM元素節(jié)點的屬性形式存在的，通過對3大家族不同屬性的靈活使用，以及調(diào)用勻速動畫、緩動動畫或頁面滾動方法，可以模擬出很多酷炫的JavaScript特效，增強界面的視覺感染力，實現(xiàn)讓靜態(tài)頁面“活”起來的效果。9.1制作緩動動畫offset家族案例—導(dǎo)航菜單圖標(biāo)緩動緩動動畫以及封裝勻速動畫以及封裝9.1

制作緩動動畫offset家族可用于獲取元素尺寸，offset的中文是偏移，補償，位移。offset家族有offseWidth、offsetHeight、offsetLeft、offsetTop和offsetParent這5個屬性。9.1.1

offset家族屬性說明offseWidth獲取當(dāng)前元素的總寬度，屬于只讀屬性，其屬性值為數(shù)值?？倢挾劝ㄗ陨韺挾?、內(nèi)邊距和邊框，即offsetWidth=width+padding+borderoffsetHeight獲取當(dāng)前元素的總高度，屬于只讀屬性，其屬性值為數(shù)值?？偢叨劝ㄗ陨砀叨?、內(nèi)邊距和邊框，即offsetHeight=height+padding+borderoffsetLeft獲取當(dāng)前元素距離最近的有定位的父級元素左側(cè)的距離，該屬性與元素本身有無定位無關(guān)。如果父級元素都沒有定位則以body左側(cè)距離計算offsetTop獲取當(dāng)前元素距離最近的有定位的父級元素頂部的距離，該屬性與元素本身有無定位無關(guān)。如果父級元素都沒有定位則以body頂部距離計算offsetParent獲取距離最近的有定位的父級元素對象，該屬性與元素本身有無定位無關(guān)。如果父級元素都沒有定位則返回body對象9.1

制作緩動動畫JavaScript的基礎(chǔ)動畫有3種運動形式，即閃動動畫、勻速動畫和緩動動畫。動畫的運動原理為“元素目標(biāo)位置=當(dāng)前位置+步長”。閃動動畫又叫閃現(xiàn)動畫，能瞬間到達目標(biāo)位置，可以實現(xiàn)短距離內(nèi)的位置切換，與位移效果類似。例如，一個元素實現(xiàn)閃動動畫，瞬間閃動到右側(cè)300px處的目標(biāo)位置，主要代碼為box.style.left="500px"。9.1.2

勻速動畫以及封裝閃動動畫9.1

制作緩動動畫勻速動畫的效果是元素每一步運動的距離都是相同的，即元素是勻速運動的。勻速動畫的公式為“元素目標(biāo)位置=當(dāng)前位置+相同步長”。勻速動畫以元素左右勻速運動為例，首先動畫效果主要是由setInterval定時器來實現(xiàn)的，每隔指定毫秒數(shù)讓物體移動一定的距離（步長），通過不斷調(diào)用定時器來達到讓元素運動的效果。然后將setInterval定時器放在一個函數(shù)內(nèi)，定義元素的運動步長（step），可設(shè)置每次運動的步長為10，此時需要判斷元素的運動方向（向左運動或向右運動）來確定步長的正負，若元素目標(biāo)位置的值大于當(dāng)前位置的值，則步長為正值，反之步長為負值。再確定元素的移動距離，即把元素的offsetLeft與step賦值給left樣式值。最后當(dāng)元素到達目標(biāo)位置時清除定時器。值得注意的是，實現(xiàn)勻速動畫的元素，其CSS樣式中一定要有絕對定位。9.1.2

勻速動畫以及封裝勻速動畫9.1

制作緩動動畫勻速動畫的封裝代碼可在jQuery庫文件中編寫，代碼如下所示。9.1.2

勻速動畫以及封裝勻速動畫封裝//勻速動畫封裝方法傳入2個參數(shù)，ele為運動的元素，endx為目標(biāo)位置functionanimation_speed(ele,endx){//1.要用定時器，須清除之前的定時器

clearInterval(ele.timer)//2.判斷并獲取步長，若元素目標(biāo)位置的值大于當(dāng)前位置的值，則步長為正值，反之步長為負值。此處設(shè)置的步長為10，可根據(jù)需要設(shè)置指定步長參數(shù)

varstep=(endx-ele.offsetLeft)>0?10:-10;//3.啟動定時器

ele.timer=setInterval(function(){//4.元素的運動距離

ele.style.left=ele.offsetLeft+step+"px";//5.檢測勻速動畫是否停止，若（目標(biāo)位置-當(dāng)前位置）的絕對值<=步長絕對值，說明此時已到達目標(biāo)位置，則清除定時器。

if(Math.abs(endx-ele.offsetLeft)<=Math.abs(step)){

clearInterval(ele.timer);//6.設(shè)置其到達目標(biāo)位置

ele.style.left=endx+"px";}

},50)}9.1制作緩動動畫offsetLeft和style.left是2種不同的形式，在使用時應(yīng)該明確它們之間的差異，offsetLeft和style.left的區(qū)別如下所示。9.1.2勻速動畫以及封裝offsetLeft對于沒有定位的元素可以獲取到偏移值，而style.left不可以。這是它們之間最大的區(qū)別。offsetLeft返回的是數(shù)值，style.left返回的是像素值類型的字符串。offsetLeft是只讀的，而style.left可讀可寫。只讀是只能獲取值，可寫是能夠賦值。style.left只能獲取元素的行內(nèi)樣式，若沒有設(shè)置則返回空字符串。值得注意的是，style.left在等號左邊時是作為屬性，在等號右邊時是作為值。offsetTop和style.top的用法與offsetLeft和style.left類似。offsetLeft和style.left的區(qū)別9.1

制作緩動動畫緩動動畫與勻速動畫的運動原理類似，區(qū)別在于緩動動畫的運動速度是先快后慢，直至停止運動。緩動動畫的公式為“元素目標(biāo)位置=當(dāng)前位置+步長（步長越來越?。?，而步長的計算方式為“步長=（元素目標(biāo)位置-當(dāng)前位置）/10”，步長的值會變得越來越小，運動速度也會越來越慢。由于此計算方式所得的步長值并不總是整數(shù)，可能會導(dǎo)致元素實際到達位置和目標(biāo)位置不能完全相同，所以需要對步長（step）值進行取整，大于0時可向上取整，小于0時可向下取整。9.1.3

緩動動畫以及封裝緩動動畫9.1

制作緩動動畫緩動動畫的封裝代碼如下所示。9.1.3緩動動畫以及封裝緩動動畫封裝//緩動動畫封裝方法functionanimation_slow(ele,endx){//1.要用定時器，先清除定時器

clearInterval(ele.timer);//2.啟動定時器

ele.timer=setInterval(function(){//3.獲取步長，步長=（目標(biāo)位置-當(dāng)前位置）/10

varstep=(endx-ele.offsetLeft)/10;//4.步長二次加工，大于0向上取整，小于0向下取整

step=step>0?Math.ceil(step):Math.floor(step);console.log(step)

//5.元素的運動距離

ele.style.left=ele.offsetLeft+step+"px";//6.檢測緩動速動畫是否停止，若（目標(biāo)位置-當(dāng)前位置）的絕對值<=步長絕對值，說明此時已到達目標(biāo)位置，則清除定時器。if(Math.abs(endx-ele.offsetLeft)<=Math.abs(step)){

clearInterval(ele.timer);//7.設(shè)置其到達目標(biāo)位置

ele.style.left=endx+"px";}

},100)}9.1制作緩動動畫9.1.4

案例-導(dǎo)航菜單圖標(biāo)緩動本實例是一個點擊導(dǎo)航菜單能使背景圖標(biāo)緩動移動的頁面。該頁面主要由<div>塊元素、<span>內(nèi)聯(lián)元素、<ul>無序列表和<img>圖像標(biāo)簽構(gòu)成，圖標(biāo)緩動的頁面結(jié)構(gòu)簡圖如圖所示。<head><title>導(dǎo)航菜單圖標(biāo)緩動</title>

<linktype="text/css"rel="stylesheet"href="icon.css"></head><body><divid="busy"><h3>企業(yè)官網(wǎng)</h3><divclass="nav"><spanclass="icon"></span><ul><li>首頁信息</li></ul></div><divclass="main"><imgsrc="../image/2.png"width="700"alt></div></div><scripttype="text/javascript"src="slow.js"></script></body>代碼實現(xiàn)9.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動主體代碼

例9.19.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動代碼實現(xiàn)在上述主體代碼中，<span>內(nèi)聯(lián)元素用于制作一個導(dǎo)航菜單的背景圖標(biāo)，<div>塊元素和<ul>無序列表用于制作導(dǎo)航欄，而每一個項目列表則用于制作導(dǎo)航菜單，<img>圖像標(biāo)簽內(nèi)嵌入一張圖片，作為頁面的主要信息展示。/*設(shè)置頁面*/#busy{width:700px;margin:10pxauto;}/*設(shè)置導(dǎo)航欄*/.nav{width:700px;height:50px;background-color:#ccc;

border-radius:10px;/*添加圓角*/margin:0auto5px;

position:relative;/*添加相對定位*/}/*設(shè)置無序列表*/ul{

list-style:none;/*取消列表標(biāo)記*/position:relative;/*添加相對定位*/}代碼實現(xiàn)9.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動CSS部分代碼

例9.1/*統(tǒng)一設(shè)置每個項目列表（導(dǎo)航菜單）*/ul>li{float:left;/*設(shè)置向左浮動*/width:100px;

height:50px;line-height:50px;text-align:center;color:#222;font-size:16px;

cursor:pointer;/*鼠標(biāo)改變形狀*/}/*設(shè)置緩動的背景圖標(biāo)部分*/.icon{display:inline-block;/*<span>內(nèi)聯(lián)元素轉(zhuǎn)換為內(nèi)聯(lián)塊元素*/width:100px;height:42px;

background-image:url("../image/1.png");/*添加背景圖片（圖標(biāo)）*/background-size:cover;/*設(shè)置背景圖片尺寸*/position:absolute;/*添加絕對定位*/top:4px;/*設(shè)置偏移位置*/left:0;}9.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動代碼實現(xiàn)在上述CSS代碼中，首先使用CSS屬性設(shè)置整個頁面和標(biāo)題的樣式，再設(shè)置導(dǎo)航欄塊，使用border-radius屬性為導(dǎo)航欄塊添加圓角，并使用position屬性為其添加相對定位。接著將<ul>無序列表定位到導(dǎo)航欄內(nèi)，然后統(tǒng)一設(shè)置每個項目列表，即每個導(dǎo)航菜單向左浮動。最后設(shè)置背景圖標(biāo)部分，為<span>元素添加背景圖片，即圖標(biāo)的圖片，并使用background-size屬性設(shè)置背景圖片尺寸，以及使用絕對定位，具體設(shè)置背景圖標(biāo)在導(dǎo)航菜單中的位置。//1.獲取元素，<span>背景圖標(biāo)、<ul>無序列表、<li>項目列表varicon=document.getElementsByClassName("icon")[0];varul=document.getElementsByTagName("ul")[0];varliArr=ul.children;//定義背景圖標(biāo)移動的距離varmoveWidth=liArr[0].offsetWidth;//2.for循環(huán)遍歷liArr項目列表，為其綁定索引值for(vari=0;i<liArr.length;i++){liArr[i].index=i;//3.為項目列表添加鼠標(biāo)移入事件liArr[i].onmouseover=function(){//4.獲取當(dāng)前移入的索引值，為當(dāng)前背景圖標(biāo)調(diào)用緩動動畫終點設(shè)置值

animation_slow(icon,this.index*moveWidth);}

代碼實現(xiàn)9.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動JS代碼

例9.1//5.創(chuàng)建記錄器用來記錄點擊時的位置varnowIndex=0;//6.為項目列表添加鼠標(biāo)離開事件liArr[i].onmouseout=function(){//7.背景圖標(biāo)回到最開始的位置animation_slow(icon,nowIndex*moveWidth);}

//8.為項目列表添加鼠標(biāo)單擊事件liArr[i].onclick=function(){//9.點擊時，把背景圖標(biāo)最開始位置記錄為當(dāng)前點擊位置

nowIndex=this.index;}}//加入緩動動畫封裝代碼

參考9.1.3節(jié)的緩動動畫封裝代碼。9.1制作緩動動畫9.1.4案例-導(dǎo)航菜單圖標(biāo)緩動代碼實現(xiàn)在上述JS代碼中，首先獲取各個元素，定義背景圖標(biāo)移動的距離。for循環(huán)遍歷liArr項目列表，并為其綁定索引值。接著為項目列表添加鼠標(biāo)移入事件，獲取到當(dāng)前移入的索引值，為當(dāng)前背景圖標(biāo)調(diào)用緩動動畫終點值，以及創(chuàng)建記錄器用來記錄鼠標(biāo)單擊時的位置。再為項目列表添加鼠標(biāo)離開事件，此時背景圖標(biāo)回到最開始的位置。然后為項目列表添加鼠標(biāo)單擊事件，此時把背景圖標(biāo)最開始的位置記錄為當(dāng)前單擊的位置。最后加入緩動動畫的封裝代碼，即可實現(xiàn)背景圖標(biāo)在導(dǎo)航菜單中緩動移動。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了offset家族的相關(guān)屬性，勻速動畫以及其封裝代碼，緩動動畫以及其封裝代碼。通過本節(jié)的學(xué)習(xí)，希望讀者可以了解JavaScript的基礎(chǔ)動畫，如閃動動畫、勻速動畫和緩動動畫，在網(wǎng)頁上實現(xiàn)更多樣的動態(tài)效果。9.2實現(xiàn)頁面滾動scroll家族案例—滾動頁面導(dǎo)航欄固定縱向滾動的緩動動畫封裝滾動方法以及封裝9.2

實現(xiàn)頁面滾動scroll家族可用于獲取元素內(nèi)容的寬度和高度，scroll的中文是滾動。scroll家族有scrollWidth、scrollHeight、scrollLeft和scrollTop這4個屬性。9.2.1

scroll家族屬性說明scrollWidth獲取當(dāng)前元素內(nèi)容的寬度，屬于只讀屬性，其屬性值為數(shù)值。寬度包括由于溢出而無法展示在網(wǎng)頁的不可見部分，但不包括內(nèi)邊距和邊框scrollHeight獲取當(dāng)前元素內(nèi)容的高度，屬于只讀屬性，其屬性值為數(shù)值。高度包括由于溢出而無法展示在網(wǎng)頁的不可見部分，但不包括內(nèi)邊距和邊框scrollLeft獲取當(dāng)前元素被卷去的左側(cè)距離，即在網(wǎng)頁中被瀏覽器遮擋的左側(cè)部分scrollTop獲取當(dāng)前元素被卷去的頭部距離，即在網(wǎng)頁中被瀏覽器遮擋的頭部部分9.2

實現(xiàn)頁面滾動使用scrollLeft和scrollTop的前提是，當(dāng)前元素必須帶有滾動條，即CSS樣式中需要有overflow:auto/scroll，才能獲取被卷去的距離。在實際開發(fā)中，由于元素能滾動的效果很少，通常都是頁面滾動，使用body或HTML調(diào)用scrollLeft和scrollTop方法，使用方法如下所示。9.2.1

scroll家族body調(diào)用：document.body.scrollLeft;HTML調(diào)用：document.documentElement.scrollLeft;9.2

實現(xiàn)頁面滾動在信息的高速交流中，不同領(lǐng)域之間的信息交換越來越緊密，如何才能保證這些不同領(lǐng)域之間的信息可以更容易且更有效率地交換成為我們首要關(guān)注的問題。為了解決這個問題，就需要不同的領(lǐng)域來針對領(lǐng)域的特性制定共同的信息內(nèi)容模型（contentmodel），然后再通過這個共同的內(nèi)容模型來標(biāo)識信息。而DTD就是一種內(nèi)容模型。DTD（DocumentTypeDefinition，文檔類型定義）是一套關(guān)于標(biāo)記符的語法規(guī)則，可以定義合法的XML文檔結(jié)構(gòu)，它使用一系列合法元素來定義文檔的結(jié)構(gòu)。DTD分為內(nèi)部DTD和外部DTD，所謂內(nèi)部DTD是指該DTD在某個文檔的內(nèi)部，只被該文檔使用。外部DTD是指該DTD不在文檔內(nèi)部，可以被其他所有的文檔來共享。DTD位于HTML文檔的第一行，即<!DOCTYPEhtml>。9.2.1

scroll家族兼容性問題1.關(guān)于DTD9.2

實現(xiàn)頁面滾動9.2.1

scroll家族兼容性問題2.兼容性已聲明DTD頭部時，谷歌、火狐和IE瀏覽器可獲取<html>元素，即document.documentElement.scrollLeft或document.documentElement.scrollTop。未聲明DTD頭部時，谷歌、火狐和IE9以上版本的瀏覽器可獲取<body>元素，即document.body.scrollLeft或document.body.scrollTop。不論是否聲明DTD頭部，谷歌、火狐和IE9以上版本的瀏覽器都支持window.pageXOffset或window.pageYOffset9.2

實現(xiàn)頁面滾動9.2.1

scroll家族兼容性問題3.兼容寫法獲取元素被卷去的左邊距離和頭部距離的兼容寫法如下所示。獲取元素被卷去的左邊距離：varscrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;獲取元素被卷去的頭部距離：varscrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;9.2實現(xiàn)頁面滾動滾動方法的封裝代碼如下所示。9.2.2

滾動方法以及封裝//scroll滾動方法的封裝functionscroll(){//如果該屬性存在，即有返回值（0~無窮大），便可調(diào)用此方法if(window.pageYOffset!==undefined){return{

top:window.pageYOffset,left:window.pageXOffset};}elseif(patMode==="CSS1Compat"){return{//已聲明DTD頭部（<!DOCTYPEhtml>）時

top:document.documentElement.scrollTop,left:document.documentElement.scrollLeft};}else{return{//剩下的怪異瀏覽器

top:document.body.scrollTop,left:document.body.scrollLeft};}}9.2實現(xiàn)頁面滾動關(guān)于頁面縱向滾動的緩動動畫，其封裝代碼如下所示。9.2.3

縱向滾動的緩動動畫封裝//關(guān)于頁面縱向滾動的緩動動畫封裝functionslow_scrolly(window,endy){//1.要用定時器，先清除定時器

clearInterval(window.timer);//2.啟動定時器

window.timer=setInterval(function(){//3.獲取步長，步長=（目標(biāo)位置-頭部滾動距離）/10

varstep=(endy-scroll().top)/10;//4.步長二次加工，大于0向上取整，小于0向下取整

step=step>0?Math.ceil(step):Math.floor(step);//5.元素的滾動距離，頭部滾動距離+步長

window.scrollTo(0,scroll().top+step);console.log(Math.abs(endy-scroll().top),step);//6.檢測緩動動畫是否停止，若（目標(biāo)位置-頭部滾動距離）的絕對值<=步長絕對值，說明此時已到達目標(biāo)位置，則清除定時器。if(Math.abs(endy-scroll().top)<=Math.abs(step)){

clearInterval(window.timer);//7.設(shè)置其到達目標(biāo)位置

window.scrollTo(0,endy);}},25)}9.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定本實例是一個滾動頁面導(dǎo)航欄固定的頁面。當(dāng)頁面的頂部區(qū)域因滾動而被卷去之后，導(dǎo)航欄能夠固定在頁面頂部，而不再隨滾動條的滾動而移動。該頁面主要由<div>塊元素和<img>圖像標(biāo)簽構(gòu)成，頁面結(jié)構(gòu)簡圖如圖所示。<head><title>固定導(dǎo)航欄</title>

<linktype="text/css"rel="stylesheet"href="fixed.css"></head><body><divid="read"><divid="top">

<imgsrc="../image/26.jpg"alt=""/></div><divid="nav">

<imgsrc="../image/27.png"alt=""/></div><divid="main">

<imgsrc="../image/28.png"alt=""/></div></div><scripttype="text/javascript"src="scroll.js"></script></body>代碼實現(xiàn)9.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定主體代碼

例9.29.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定代碼實現(xiàn)在上述主體代碼中，頁面整體分為3個部分，即頭部、導(dǎo)航欄和主體內(nèi)容，每個部分分別嵌入1個<img>圖像標(biāo)簽，即用圖片代表頁面內(nèi)容。/*設(shè)置整個頁面*/#read{width:650px;margin:0auto;}/*設(shè)置頭部、導(dǎo)航欄和主體3部分的圖片*/img{width:650px;

vertical-align:top;/*清除圖片底部空白間隙*/}/*設(shè)置導(dǎo)航欄*/#nav{overflow:hidden;/*清除定位帶來的異常影響*/}/*設(shè)置主體部分的外邊距*/#main{margin:0auto;}/*導(dǎo)航欄添加class類名，設(shè)置新樣式*/.fixed{

position:fixed;/*添加固定定位*/top:0;/*使用位置屬性設(shè)置固定定位的具體位置*/}代碼實現(xiàn)9.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定CSS部分代碼

例9.29.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定代碼實現(xiàn)在上述CSS代碼中，首先設(shè)置整個頁面的寬度和外邊距，再統(tǒng)一設(shè)置頭部、導(dǎo)航欄和主體3個部分的圖片寬度，以及使用vertical-align屬性清除圖片底部的空白間隙。接著為導(dǎo)航欄設(shè)置overflow屬性，清除定位帶來的異常影響。然后設(shè)置主體部分的外邊距為0，與導(dǎo)航欄無空白間隙。最后通過導(dǎo)航欄新添加的class類名，設(shè)置新樣式，為導(dǎo)航欄設(shè)置固定定位，以及使用位置屬性設(shè)置具體位置。//頁面加載完成之后再執(zhí)行window.onload=function(){//1.獲取導(dǎo)航欄、主體元素

varnav=document.getElementById("nav");varmain=document.getElementById("main");//獲取導(dǎo)航欄頂部的距離，即頭部的高度

vartopHeight=nav.offsetTop;//2.給window添加滾動事件

window.onscroll=function(){//3.調(diào)用封裝的scroll方法獲取被卷去的頭部距離，并判斷被卷去的距離//若被卷去的頭部距離大于導(dǎo)航欄到頂部的距離if(scroll().top>=topHeight){//則為導(dǎo)航欄添加class類名為“fixed”，以便設(shè)置固定定位

nav.setAttribute("class","fixed");

代碼實現(xiàn)9.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定JS代碼

例9.2//由于導(dǎo)航欄設(shè)置固定定位不占位置，會影響后面主體部分的布局，//因此需要將主體部分的上外邊距設(shè)置為導(dǎo)航欄的高度

main.style.marginTop=nav.offsetHeight+"px";}//若小于導(dǎo)航欄到頂部的距離，則恢復(fù)原來的樣式else{//通過removeAttribute()方法移除導(dǎo)航欄新添加的class類名

nav.removeAttribute("class");//導(dǎo)航欄取消固定定位之后，主體部分需要恢復(fù)原狀，將外邊距設(shè)置為0

main.style.margin="0auto";}}}//加入scroll滾動動畫封裝代碼

參考9.2.2節(jié)的滾動動畫封裝代碼。9.2實現(xiàn)頁面滾動9.2.4案例-滾動頁面導(dǎo)航欄固定代碼實現(xiàn)在上述JS代碼中，首先通過DOM操作獲取導(dǎo)航欄和主體元素，以及獲取導(dǎo)航欄頂部的距離，即頭部的高度。接著為window添加滾動事件，調(diào)用scroll滾動方法獲取被卷去的頭部距離，并判斷被卷去的距離。若被卷去的頭部距離大于導(dǎo)航欄到頂部的距離，則為導(dǎo)航欄添加class類名為“fixed”，以便在CSS樣式中設(shè)置固定定位。由于導(dǎo)航欄設(shè)置固定定位不占位置，會影響到后面主體部分的布局，因此需要將主體部分的上外邊距設(shè)置為導(dǎo)航欄的高度。若被卷去的頭部距離小于導(dǎo)航欄到頂部的距離，則恢復(fù)原來的樣式，通過removeAttribute()方法移除導(dǎo)航欄新添加的class類名，導(dǎo)航欄取消固定定位之后，主體部分需要恢復(fù)原狀，將外邊距設(shè)置為0。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了scroll家族的相關(guān)屬性，scroll滾動方法的封裝，以及縱向滾動的緩動動畫封裝。通過本節(jié)的學(xué)習(xí)，希望讀者可以了解scroll滾動方法的封裝以及使用，在網(wǎng)頁上實現(xiàn)效果多樣的滾動方式。9.3使用event對象client家族案例—放大鏡效果event事件對象9.3使用event對象clientl家族可用于獲取可視區(qū)域的寬度和高度。client家族有clientWidth、clientHeight、clientLeft、clientTop、clientX和clientY這6個屬性。9.3.1

client家族屬性說明clientWidth獲取網(wǎng)頁可視區(qū)域?qū)挾?，寬度包括自身寬度和?nèi)邊距，即clientWidth=width+paddingclientHeight獲取網(wǎng)頁可視區(qū)域高度，高度包括自身高度和內(nèi)邊距，即clientHeight=height+paddingclientLeft返回的是元素左邊框的寬度clientTop返回的是元素上邊框的寬度clientX鼠標(biāo)距離可視區(qū)域左側(cè)距離，需要event對象調(diào)用clientY鼠標(biāo)距離可視區(qū)域上側(cè)距離，需要event對象調(diào)用9.3使用event對象在觸發(fā)DOM上的某個事件時，會產(chǎn)生一個event事件對象，這個對象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對象，但支持的方式不同，例如進行鼠標(biāo)操作的時候，會添加鼠標(biāo)位置的相關(guān)信息到事件對象中。總而言之event是一個事件中的內(nèi)置對象，其內(nèi)部裝了很多關(guān)于鼠標(biāo)和事件本身的信息，如鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)等。9.3.2

event事件對象概述9.3使用event對象event事件對象具有兼容性問題。W3C標(biāo)準(zhǔn)規(guī)定，事件是作為函數(shù)的參數(shù)傳入的。谷歌火狐等遵循W3C規(guī)范的瀏覽器支持event事件對象作為函數(shù)參數(shù)傳入，但IE6/7/8版本的瀏覽器采用了一種非標(biāo)準(zhǔn)的方式，將事件作為window對象的event屬性，可以使用event或window.event來進行訪問，如window.event、window.event.clientX等。event對象的兼容寫法如下示例代碼所示。9.3.2

event事件對象兼容性問題box.onclick=function(event){varevent=event||window.event;console.log(event);9.3使用event對象event對象的屬性說明如表所示。9.3.2

event事件對象event對象屬性屬性說明event.timeStamp返回事件生成的時間，即距離上一次刷新頁面，到本次事件觸發(fā)的間隔時間event.type當(dāng)前事件類型event.target該事件被傳送到的對象，即指當(dāng)前事件具體在哪一個元素上觸發(fā)event.button返回當(dāng)事件被觸發(fā)時，哪個鼠標(biāo)按鈕被點擊event.pageX鼠標(biāo)相對于整個文檔（網(wǎng)頁頁面）的左側(cè)部分的距離event.pageY鼠標(biāo)相對于整個文檔（網(wǎng)頁頁面）的頂部部分的距離9.3使用event對象續(xù)表。9.3.2

event事件對象event對象屬性屬性說明event.screenX鼠標(biāo)相對于屏幕左側(cè)的距離event.screenY鼠標(biāo)相對于屏幕頂部的距離event.clientX鼠標(biāo)相對于可視區(qū)域（瀏覽器頁面）的左側(cè)的距離event.clientY鼠標(biāo)相對于可視區(qū)域（瀏覽器頁面）的頂部的距離9.3使用event對象pageX和pageY獲取鼠標(biāo)相對于整個文檔（網(wǎng)頁頁面）的距離，當(dāng)出現(xiàn)滾動條時，隱藏的部分會被計算入pageX和pageY，計算公式為“鼠標(biāo)在頁面的位置=鼠標(biāo)到可視區(qū)域的距離（看得見）+被滾動條卷去的距離（看不見）”。pageX和pageY的封裝代碼如下所示。9.3.2

event事件對象pageX和pageY的封裝//獲取鼠標(biāo)到整個文檔的距離，page屬性兼容性封裝functiongetpageXY(event){return{x:scroll().left+event.clientX,y:scroll().top+event.clientY}}9.3使用event對象9.3.3案例-放大鏡效果本實例是圖書商店中的放大鏡效果頁面。該頁面主要由<div>塊元素和<img>圖像標(biāo)簽構(gòu)成，圖書放大鏡效果的頁面結(jié)構(gòu)簡圖如圖所示。<body><divid="shop">

<divid="book">

<divid="pic"><imgsrc="../image/books.png"width="210"alt=""id="s_img">

<divid="Movemask"></div></div>

<divid="big_pic"><imgsrc="../image/books.png"width="560"alt=""id="b_img"></div></div></div><scripttype="text/javascript"src="book.js"></script></body>代碼實現(xiàn)9.3使用event對象9.3.3案例-放大鏡效果主體代碼

例9.39.3使用event對象9.3.3案例-放大鏡效果代碼實現(xiàn)在上述主體代碼中，首先添加一個<div>子元素塊“#book”，作為圖書展示區(qū)域，在此區(qū)域內(nèi)分別添加一個圖書圖像塊“#pic”和右側(cè)放大的圖書區(qū)域“#big_pic”，并在圖書圖像塊“#pic”內(nèi)添加了一個具有移動面罩效果的透明元素塊，而<img>圖像標(biāo)簽用于嵌入圖書圖片。/*設(shè)置商品頁面*/#shop{width:750px;height:375px;background-image:url(../image/bj.png);/*添加背景圖片*/background-size:cover;/*設(shè)置背景圖片尺寸*/margin:10pxauto;/*設(shè)置外邊距*/border:1pxsolid#dd2727;/*添加邊框樣式*/}/*設(shè)置圖書展示區(qū)域*/#book{width:210px;height:210px;

margin:14px10px0;/*設(shè)置外邊距，上左右下*/position:relative;/*添加相對定位*/border:1pxsolid#ccc;}/*設(shè)置圖書圖像塊*/#pic{width:210px;height:210px;}

代碼實現(xiàn)9.3使用event對象9.3.3案例-放大鏡效果CSS部分代碼

例9.3/*設(shè)置移動的被放大的圖書區(qū)域（小藍色透明塊）*/#Movemask{width:105px;height:105px;

background-color:rgba(149,192,225,0.4);/*設(shè)置透明顏色*/position:absolute;/*添加絕對定位*/left:0;/*設(shè)置偏移位置*/top:0;cursor:move;/*鼠標(biāo)變?yōu)橐苿訝顟B(tài)*/display:none;/*隱藏元素*/}/*設(shè)置右側(cè)放大的圖書圖像塊*/#big_pic{width:280px;height:280px;border:1pxsolid#aaa;

overflow:hidden;/*清除異常的顯示效果*/position:absolute;/*設(shè)置絕對定位*/left:250px;/*設(shè)置偏移位置*/top:0;display:none;/*隱藏元素*/}9.3使用event對象9.3.3案例-放大鏡效果代碼實現(xiàn)在上述CSS代碼中，首先設(shè)置商品頁面，為該頁面添加背景圖片，并設(shè)置背景尺寸，以及添加邊框樣式。再設(shè)置圖書展示區(qū)域，添加相對定位，使用CSS屬性設(shè)置樣式。然后設(shè)置移動的被放大的圖書區(qū)域，使用rgba()函數(shù)設(shè)置元素藍色透明，添加絕對定位設(shè)置具體的偏移位置，以及使用display屬性隱藏該元素。最后設(shè)置右側(cè)放大的圖書圖像塊，使用overflow屬性用來清除異常的顯示效果，再次添加絕對定位設(shè)置具體的偏移位置，以及使用display屬性隱藏該元素。//1.獲取元素:bookmaskbigPicbImgsImg;varbook=document.getElementById("book");varmask=document.getElementById("Movemask");varbigPic=document.getElementById("big_pic");varbImg=document.getElementById("b_img");varsImg=document.getElementById("s_img");//2.鼠標(biāo)移入移出book,顯示mask和bigPic塊//為圖書展示區(qū)域添加鼠標(biāo)移入事件book.onmouseenter=function(){//"Movemask"移動面罩塊顯示

mask.style.display="block";//"big_pic"右側(cè)放大區(qū)域顯示

bigPic.style.display="block";}//為圖書展示區(qū)域添加鼠標(biāo)移出事件

book.onmouseleave=function(){//元素塊再次被隱藏

mask.style.display="none";bigPic.style.display="none";}

代碼實現(xiàn)9.3使用event對象9.3.3案例-放大鏡效果JS代碼

例9.3//3.為圖書展示區(qū)域添加鼠標(biāo)移動事件

book.onmousemove=function(eve

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

網(wǎng)頁設(shè)計基礎(chǔ)與實戰(zhàn)課件

文檔簡介

溫馨提示

最新文檔

評論

網(wǎng)頁設(shè)計基礎(chǔ)與實戰(zhàn)課件

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔