系统带你学习 WebAPIs 第五讲
生活随笔
收集整理的這篇文章主要介紹了
系统带你学习 WebAPIs 第五讲
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Web APIs
本篇學習目標:
能夠說出常見 offset 系列屬性的作用
能夠說出常見 client 系列屬性的作用
能夠說出常見 scroll 系列屬性的作用
能夠封裝簡單動畫函數
**1.1. **元素偏移量 offset 系列
1.1.1 offset 概述
offset 翻譯過來就是偏移量， 我們使用 offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。
獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數值都不帶單位
1.1.2 offset 與 style 區別
offset
-
offset 可以得到任意樣式表中的樣式值
-
offset 系列獲得的數值是沒有單位的
-
offsetWidth 包含padding+border+width
-
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
-
所以，我們想要獲取元素大小位置，用offset更合適
style
-
style 只能得到行內樣式表中的樣式值
-
style.width 獲得的是帶有單位的字符串
-
style.width 獲得不包含padding和border 的值
-
style.width 是可讀寫屬性，可以獲取也可以賦值
-
所以，我們想要給元素更改值，則需要用style改變
1.1.3 案例：獲取鼠標在盒子內的坐標
1.1.4 案例：盒子拖拽
1.1.5. 案例分析:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background-color: green;}</style> </head><body><div class="box"></div><script>/*1) 鼠標在盒子上按下2）鼠標在文檔中移動3）盒子跟著鼠標拖動4）松開鼠標，盒子停止移動*/var box = document.querySelector('.box')// 為box添加mousedown事件，在這個事件中，首先獲取鼠標在盒子中的坐標box.addEventListener('mousedown', function (e) {// 分別獲取鼠標按下時在盒子中的坐標var mouse_x = e.pageX - this.offsetLeftvar mouse_y = e.pageY - this.offsetTop// 鼠標按下之后為文檔添加鼠標移動事件document.addEventListener('mousemove', moveBox)function moveBox(e) {// 不斷獲取盒子距離頁面左側和頂部的距離var box_left = e.pageX - mouse_xvar box_top = e.pageY - mouse_ybox.style.left = box_left + 'px'box.style.top = box_top + 'px'}// 為盒子添加鼠標松開事件，在此事件中為document移除mousemove事件box.addEventListener('mouseup', function () {document.removeEventListener('mousemove', moveBox)})})</script> </body></html>1.1.6 案例：仿京東放大鏡
1.1.7. 案例分析:
1.2. 元素可視區 client 系列
1.2.1 client概述
client 翻譯過來就是客戶端，我們使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client
系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
1.2.2. 淘寶 flexible.js 源碼分析
立即執行函數 (function(){})() 或者 (function(){}())
主要作用： 創建一個獨立的作用域。 避免了命名沖突問題
下面三種情況都會刷新頁面都會觸發 load 事件。
1.a標簽的超鏈接
2.F5或者刷新按鈕（強制刷新）
3.前進后退按鈕
但是 火狐中，有個特點，有個“往返緩存”，這個緩存中不僅保存著頁面數據，還保存了DOM和JavaScript的狀態；實際上是將整個頁面都保存在了內存里。
所以此時后退按鈕不能刷新頁面。
此時可以使用 pageshow事件來觸發。，這個事件在頁面顯示時觸發，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發后觸發；根據事件對象中的persisted來判斷是否是緩存中的頁面觸發的pageshow事件
注意這個事件給window添加。
1.3.元素滾動 scroll 系列
1.3.1. scroll 概述
scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。
1.3.2. 頁面被卷去的頭部
如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發 onscroll事件。
1.3.3.案例：仿淘寶固定右側側邊欄
1.3.4.案例分析:
1.3.5.頁面被卷去的頭部兼容性解決方案
需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：
1.4. 三大系列總結
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: #fff;border: 10px solid #000;margin-top: 100px;/* overflow: scroll; */}</style> </head><body><div class="box"><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p></div><script>var box = document.querySelector('.box')// 元素的上邊框距離具有定位的父元素的上邊框的距離console.log(box.offsetTop)// 元素的上邊框的大小console.log(box.clientTop)// 元素被卷去的距離console.log(box.scrollTop)// 測試scrollTop// box.addEventListener('scroll',function(){// console.log(box.scrollTop)// })console.log('-----------------')// 獲取的時元素的高度：width+padding+borderconsole.log(box.offsetHeight)// 獲取元素的高度，width+padding（只獲取元素的可視區域的高度）console.log(box.clientHeight)// 獲取元素的高度，width+padding（只獲取元素的實際的高度）console.log(box.scrollHeight)</script> </body></html>他們主要用法：
1.offset系列 經常用于獲得元素位置 offsetLeft offsetTop
2.client經常用于獲取元素大小 clientWidth clientHeight
3.scroll 經常用于獲取滾動距離 scrollTop scrollLeft
4.注意頁面滾動的距離通過 window.pageXOffset 獲得
1.5. mouseenter 和mouseover的區別
- 當鼠標移動到元素上時就會觸發mouseenter 事件
- 類似 mouseover，它們兩者之間的差別是
- mouseover 鼠標經過自身盒子會觸發，經過子盒子還會觸發。mouseenter 只會經過自身盒子觸發
- 之所以這樣，就是因為mouseenter不會冒泡
- 跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡
1.6. 動畫函數封裝
1.6.1. 動畫實現原理
核心原理：通過定時器 setInterval() 不斷移動盒子位置。
實現步驟：
1.6.2. 動畫函數給不同元素記錄不同定時器
如果多個元素都使用這個動畫函數，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。
核心原理：利用 JS 是一門動態語言，可以很方便的給當前對象添加屬性。
function animate(obj, target) {// 當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器// 解決方案就是 讓我們元素只有一個定時器執行// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止動畫 本質是停止定時器clearInterval(obj.timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}重點：
更多前端硬核技術 總結 分享 交流 前端大佬社區誠邀各位加入討論
https://bbs.csdn.net/forums/JHXL
總結
以上是生活随笔為你收集整理的系统带你学习 WebAPIs 第五讲的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 系统带你学习 WebAPIs 第四讲
- 下一篇： 系统带你学习 WebAPIs —— 动画