1. 元素偏移量offset系列：（使用其相關(guān)屬性可以動態(tài)的得到該元素的位置（偏移）、大小? ? ? ? （1）獲得元素距離帶有定位父元素的位置? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2）獲得元素自身大?。ǜ叨群蛯挾龋ǚ祷氐臄?shù)值都不帶單位）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注：offset與style的區(qū)別：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?offset：①offset可以得到任意樣式表中的樣式值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②offset獲得的數(shù)值無單位? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③offsetWIdth包含padding+border+width? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④offsetWidth等屬性是只讀屬性，只能獲取不能賦值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤想要獲取元素大小位置用offset? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?style：①style只能得到行內(nèi)樣式表中的樣式值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ②style.width獲得的是帶有單位的字符串? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③style.width獲得不包含padding和border的值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④style.width是可讀寫屬性，可以獲取也可以賦值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤想要給元素更改值，需要用style? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???? ??? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
2. client系列：使用client系列的相關(guān)屬性獲取元素可視區(qū)相關(guān)信息，通過client系列的相關(guān)屬性可以動態(tài)的得到該元素的邊框大小，元素大小。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???
3. ? ?案例：淘寶flexible.js源碼分析：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）立即執(zhí)行函數(shù)（function() {}）()或（function(){}()）：主要作用：創(chuàng)建一個獨立的作用域，避免命名沖突問題，也可以傳遞參數(shù)，如果有多個立即執(zhí)行函數(shù)，需要用分號隔開。? ? ?（2）都會刷新頁面都會觸發(fā)load事件的三種情況：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?①a標(biāo)簽的超鏈接? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②F5或刷新按鈕（強制刷新）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③前進(jìn)后退按鈕? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當(dāng)如果某個瀏覽器它不僅保存頁面數(shù)據(jù)，還保存DOM和JavaScript的狀態(tài)，即將整個頁面保存到內(nèi)存中，所以后退按鈕不能刷新頁面。此時使用pageshow事件來觸發(fā)，這個事件在頁面顯示時觸發(fā)，無論頁面是否來自緩存，在重新加載頁面中，pageshow會在load事件觸發(fā)后觸發(fā)，根據(jù)事件對象中的persisted來判斷是否是緩存中頁面觸發(fā)的pageshow事件，注意這個事件給window添加。?
4. 元素scroll系列：可以動態(tài)得到該元素大小、滾動距離。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ??? ? ??
5. （1）offset系列用于獲取元素位置：offsetLeft、offsetTop? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2）client用于獲取元素大?。篶lientWidth、clientHeight? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （3）scroll用于獲取滾動距離：scrollTop、scrollLeft? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （4）頁面滾動的距離通過window.pageYOffset獲得? ?
6. mouseenter和mouseover區(qū)別? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）當(dāng)鼠標(biāo)移動到元素上時就會觸發(fā)mouseenter事件，而mouseover鼠標(biāo)經(jīng)過自身盒子會觸發(fā)，經(jīng)過子盒子還會觸發(fā)，mouseenter只會經(jīng)過自身盒子觸發(fā)。因為mouseenter不會冒泡，mouseover會冒泡，當(dāng)經(jīng)過子盒子是不會觸發(fā)但會冒泡到父盒子上從而觸發(fā)。? ? ? ? ? ? ? （2）跟mouseenter搭配鼠標(biāo)離開mouseleave同樣不會冒泡。
7. 動畫實現(xiàn)原理：通過定時器setInterval()不斷移動盒子位置。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）實現(xiàn)步驟：①獲得盒子當(dāng)前位置? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②讓盒子在當(dāng)前位置加上1個移動距離? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③利用定時器不斷重復(fù)這個操作? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?④加一個結(jié)束定時器的條件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?⑤此元素要添加定位，才能使用element.style.left??
8. 動畫函數(shù)簡單封裝：（注意函數(shù)需要2個參數(shù)。動畫對象和移動距離）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?（1）動畫函數(shù)給不同元素記錄不同定時器：原理：JS是一門動態(tài)語言，可以給當(dāng)前對象添加屬性。? ? ?
9. 緩動動畫原理：就是讓元素運動速度有所變化，例如讓速度慢慢停下來? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）原理：①讓盒子每次移動的距離慢慢變小，速度就會慢慢落下? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②核心算法：（目標(biāo)值-現(xiàn)在位置）/10做為每次移動的距離 步長? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③停止的條件：讓當(dāng)前盒子位置等于目標(biāo)盒子位置就停止定時器? ? ?
10. 動畫函數(shù)添加回調(diào)函數(shù)：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）回調(diào)函數(shù)原理：函數(shù)可以作為一個參數(shù)，將這個函數(shù)作為參數(shù)傳到另一個函數(shù)里面，當(dāng)那個函數(shù)執(zhí)行完之后，再執(zhí)行傳進(jìn)去的這個函數(shù)。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2）回調(diào)函數(shù)寫在定時器結(jié)束的位置。
11. 動畫函數(shù)的使用：將動畫函數(shù)封裝到單獨JS文件里面。?? ?
12. 常見網(wǎng)頁特效：輪播圖? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示；離開，隱藏左右按鈕。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2）點擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （3）圖片的同時，下面小圓圈模塊跟隨一起變化。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （4）點擊小圓圈，可以播放相應(yīng)圖片。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （5）鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會自動播放圖片。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （6）鼠標(biāo)經(jīng)過，輪播圖模塊，自動播放停止。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ①動態(tài)生成小圓圈（其個數(shù)與圖片張數(shù)一致）：先得到ul中l(wèi)i的個數(shù)，利用循環(huán)動態(tài)生成小圓圈（這個小圓圈要放在ol里面）。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ②創(chuàng)建節(jié)點createElement('li')? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③插入節(jié)點ol.appendChild(li)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④?ol里面的第一個li設(shè)置類名為current? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤小圓圈排他思想：點擊當(dāng)前小圓圈，就添加current類·，其余小圓圈移除這個current類（生成小圓圈同時可以直接綁定這個點擊事件）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑥點擊小圓圈滾動圖片：此時用到animate動畫函數(shù)，將js文件引入到（因為index.js依賴animate.js，所以animate.js要寫在index.js上面）；使用動畫函數(shù)前提，該元素必須有定位；注意是ul移動不是li；滾動圖片核心算法是點擊某個小圓圈，讓圖片滾動，小圓圈的索引號乘以圖片寬度作為ul移動距離；此時要知道小圓圈索引號，可以生成小圓圈時，給它設(shè)置一個自定義屬性，點擊時候獲取這個自定義屬性即可。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑦點擊右側(cè)按鈕一次，就讓圖片滾動一張：聲明一個變量num，點擊一次，自增1，讓這個變量乘以圖片寬度，就是ul滾動距離；圖片無縫滾動原理是把ul第一個li復(fù)制一份，放到ul的最后面，當(dāng)圖片滾動到克隆的最后一張圖片時，讓ul快速的，不做動畫的跳到最左側(cè)：left為0，同時num賦值為0，重新開始滾動圖片。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑧克隆第一張圖片：克隆ul第一個li cloneNode() 加true深克隆 復(fù)制里面的子節(jié)點 false淺克隆。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑨點擊右側(cè)按鈕，小圓圈跟隨變化：聲明一個變量circle，每次點擊自增1，由于左側(cè)按鈕也需要這個變量，因此聲明全局變量；但有5張圖，4個小圓圈，如果circle==4就從新復(fù)原為0。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑩自動播放功能：添加一個定時器，自動播放輪播圖，類似于點擊了右側(cè)按鈕，可以使用手動調(diào)用右側(cè)按鈕點擊事件arrow_r.click()；鼠標(biāo)經(jīng)過focus就停止定時器，鼠標(biāo)離開就開啟定時器。
13. 節(jié)流閥：（防止輪播圖連續(xù)點擊造成播放過快）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）目的：當(dāng)上一個函數(shù)動畫內(nèi)容執(zhí)行完畢，再去執(zhí)行下一個函數(shù)動畫，讓事件無法連續(xù)觸發(fā)。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）實現(xiàn)思路：利用回調(diào)函數(shù)，添加一個變量來控制，鎖住函數(shù)和解鎖函數(shù)。? ? ? ? ? ? ? ? ? ? ?（3）過程：①設(shè)置一個變量var flag=true;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②if(flag=false;do something)? 關(guān)閉水龍頭? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③利用回調(diào)函數(shù)，動畫執(zhí)行完畢，flag=true? 打開水龍頭?
14. 滾動窗口至文檔的特殊位置：window.scroll(x,y),不跟單位 ??? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

文章來源地址http://www.zghlxwxcb.cn/news/detail-445004.html

到了這里，關(guān)于PC端網(wǎng)頁特效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！