元素偏移量 offset 系列
- offset 概述
offset 翻譯過來就是偏移量， 我們使用 offset系列相關(guān)屬性可以動(dòng)態(tài)的得到該元素的位置（偏移）、大小等。
- 獲得元素距離帶有定位父元素的位置
- 獲得元素自身的大小（寬度高度）
-
注意：返回的數(shù)值都不帶單位
image.png
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不帶單位的數(shù)值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以帶有定位的父親為準(zhǔn) 如果么有父親或者父親沒有定位 則以 body 為準(zhǔn)
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 寬度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回帶有定位的父親 否則返回的是body
console.log(son.offsetParent); // 返回帶有定位的父親 否則返回的是body
console.log(son.parentNode); // 返回父親 是最近一級的父親 親爸爸 不管父親有沒有定位
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改變
因?yàn)槠綍r(shí)我們都是給元素注冊觸摸事件，所以重點(diǎn)記住 targetTocuhes
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="box" style="width: 200px;"></div>
<script>
// offset與style的區(qū)別
var box = document.querySelector('.box');
console.log(box.offsetWidth); //200
console.log(box.style.width); //200px
// box.offsetWidth = '300px';
box.style.width = '300px';
</script>
</body>
案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 我們在盒子內(nèi)點(diǎn)擊，想要得到鼠標(biāo)距離盒子左右的距離。
- 首先得到鼠標(biāo)在頁面中的坐標(biāo)（e.pageX, e.pageY）
- 其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
- 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離，得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 如果想要移動(dòng)一下鼠標(biāo)，就要獲取最新的坐標(biāo)，使用鼠標(biāo)移動(dòng)
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y;
})
image.png
獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 我們在盒子內(nèi)點(diǎn)擊，想要得到鼠標(biāo)距離盒子左右的距離。
- 首先得到鼠標(biāo)在頁面中的坐標(biāo)（e.pageX, e.pageY）
- 其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
- 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離，得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo)
- 如果想要移動(dòng)一下鼠標(biāo)，就要獲取最新的坐標(biāo)，使用鼠標(biāo)移動(dòng)
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y;
})
案例：模態(tài)框拖拽
- 點(diǎn)擊彈出層， 模態(tài)框和遮擋層就會(huì)顯示出來 display:block;
- 點(diǎn)擊關(guān)閉按鈕，模態(tài)框和遮擋層就會(huì)隱藏起來 display:none;
- 在頁面中拖拽的原理：鼠標(biāo)按下并且移動(dòng)， 之后松開鼠標(biāo)
- 觸發(fā)事件是鼠標(biāo)按下mousedown，鼠標(biāo)移動(dòng)mousemove 鼠標(biāo)松開 mouseup
- 拖拽過程: 鼠標(biāo)移動(dòng)過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框可以跟著鼠標(biāo)走了
- 鼠標(biāo)按下觸發(fā)的事件源是最上面一行，就是 id 為 title
- 鼠標(biāo)的坐標(biāo)減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)， 才是模態(tài)框真正的位置。
- 鼠標(biāo)按下，我們要得到鼠標(biāo)在盒子的坐標(biāo)。
- 鼠標(biāo)移動(dòng)，就讓模態(tài)框的坐標(biāo) 設(shè)置為 ：鼠標(biāo)坐標(biāo) 減去盒子坐標(biāo)即可，注意移動(dòng)事件寫到按下事件里面。
- 鼠標(biāo)松開，就停止拖拽，就是可以讓鼠標(biāo)移動(dòng)事件解除
// 1. 獲取元素
var login = document.querySelector('.login');//框
var mask = document.querySelector('.login-bg');//遮罩
var link = document.querySelector('#link');//打開彈窗的按鈕
var closeBtn = document.querySelector('#closeBtn');//關(guān)閉按鈕
var title = document.querySelector('#title');//移動(dòng)區(qū)域
// 2. 點(diǎn)擊彈出層這個(gè)鏈接 link 讓mask 和login 顯示出來
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 開始拖拽
// (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動(dòng)事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
案例：仿京東放大鏡
- 黃色的遮擋層跟隨鼠標(biāo)功能。
- 把鼠標(biāo)坐標(biāo)給遮擋層不合適。因?yàn)檎趽鯇幼鴺?biāo)以父盒子為準(zhǔn)。
- 首先是獲得鼠標(biāo)在盒子的坐標(biāo)。
- 之后把數(shù)值給遮擋層做為left 和top值。
- 此時(shí)用到鼠標(biāo)移動(dòng)事件，但是還是在小圖片盒子內(nèi)移動(dòng)。
- 發(fā)現(xiàn)，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半。
- 遮擋層不能超出小圖片盒子范圍。
- 如果小于零，就把坐標(biāo)設(shè)置為0
- 如果大于遮擋層最大的移動(dòng)距離，就把坐標(biāo)設(shè)置為最大的移動(dòng)距離
- 遮擋層的最大移動(dòng)距離：小圖片盒子寬度 減去 遮擋層盒子寬度
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1. 當(dāng)我們鼠標(biāo)經(jīng)過 preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 2. 鼠標(biāo)移動(dòng)的時(shí)候，讓黃色的盒子跟著鼠標(biāo)來走
preview_img.addEventListener('mousemove', function(e) {
// (1). 先計(jì)算出鼠標(biāo)在盒子內(nèi)的坐標(biāo)
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
// (2) 減去盒子高度 300的一半 是 150 就是我們mask 的最終 left 和top值了
// (3) 我們mask 移動(dòng)的距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4) 如果x 坐標(biāo)小于了0 就讓他停在0 的位置
// 遮擋層的最大移動(dòng)距離
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 3. 大圖片的移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離
// 大圖
var bigIMg = document.querySelector('.bigImg');
// 大圖片最大移動(dòng)距離
var bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大圖片的移動(dòng)距離 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigIMg.style.left = -bigX + 'px';
bigIMg.style.top = -bigY + 'px';
})
})
image.png
元素可視區(qū) client 系列
- client概述
client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client
系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。
image.png
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
// client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
var div = document.querySelector('div');
console.log(div.clientWidth);
</script>
</body>
image.png
立即執(zhí)行函數(shù)
立即執(zhí)行函數(shù) (function() {})() 或者 (function(){}())
主要作用： 創(chuàng)建一個(gè)獨(dú)立的作用域。 避免了命名沖突問題
// 1.立即執(zhí)行函數(shù): 不需要調(diào)用，立馬能夠自己執(zhí)行的函數(shù)
function fn() {
console.log(1);
}
fn();
// 2. 寫法 也可以傳遞參數(shù)進(jìn)來
// 1.(function() {})() 或者 2. (function(){}());
(function(a, b) {
console.log(a + b);
var num = 10;
})(1, 2); // 第二個(gè)小括號可以看做是調(diào)用函數(shù)
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部變量
}(2, 3));
// 3. 立即執(zhí)行函數(shù)最大的作用就是 獨(dú)立創(chuàng)建了一個(gè)作用域, 里面所有的變量都是局部變量 不會(huì)有命名沖突的情況
主要作用： 創(chuàng)建一個(gè)獨(dú)立的作用域。 避免了命名沖突問題
下面三種情況都會(huì)刷新頁面都會(huì)觸發(fā) load 事件。
1.a標(biāo)簽的超鏈接
2.F5或者刷新按鈕（強(qiáng)制刷新）
3.前進(jìn)后退按鈕
但是 火狐中，有個(gè)特點(diǎn)，有個(gè)“往返緩存”，這個(gè)緩存中不僅保存著頁面數(shù)據(jù)，還保存了DOM和JavaScript的狀態(tài)；實(shí)際上是將整個(gè)頁面都保存在了內(nèi)存里。
所以此時(shí)后退按鈕不能刷新頁面。
此時(shí)可以使用 pageshow事件來觸發(fā)。，這個(gè)事件在頁面顯示時(shí)觸發(fā)，無論頁面是否來自緩存。在重新加載頁面中，pageshow會(huì)在load事件觸發(fā)后觸發(fā)；根據(jù)事件對象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件
注意這個(gè)事件給window添加。
案例： 淘寶 flexible.js 源碼分析
(function flexible(window, document) {
// 獲取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size 設(shè)置我們body 的字體大小
function setBodyFontSize() {
// 如果頁面中有body 這個(gè)元素 就設(shè)置body的字體大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果頁面中沒有body 這個(gè)元素，則等著 我們頁面主要的DOM元素加載完畢再去設(shè)置body
// 的字體大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 設(shè)置我們html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 當(dāng)我們頁面尺寸大小發(fā)生變化的時(shí)候，要重新設(shè)置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我們重新加載頁面觸發(fā)的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是說如果這個(gè)頁面是從緩存取過來的頁面，也需要從新計(jì)算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移動(dòng)端的瀏覽器不支持0.5像素的寫法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
元素滾動(dòng) scroll 系列
scroll 概述
scroll 翻譯過來就是滾動(dòng)的，我們使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。
image.png
image.png
頁面被卷去的頭部
如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個(gè)頁面時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。當(dāng)滾動(dòng)條向下滾動(dòng)時(shí)，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā) onscroll事件。
案例：仿淘寶固定右側(cè)側(cè)邊欄
- 需要用到頁面滾動(dòng)事件 scroll 因?yàn)槭琼撁鏉L動(dòng)，所以事件源是document
- 滾動(dòng)到某個(gè)位置，就是判斷頁面被卷去的上部值。
- 頁面被卷去的頭部：可以通過window.pageYOffset 獲得 如果是被卷去的左側(cè)window.pageXOffset
- 注意，元素被卷去的頭部是element.scrollTop , 如果是頁面被卷去的頭部 則是 window.pageYOffset
- 其實(shí)這個(gè)值 可以通過盒子的 offsetTop可以得到，如果大于等于這個(gè)值，就可以讓盒子固定定位了
//1. 獲取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動(dòng)的外面
var bannerTop = banner.offsetTop
// 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 獲取main 主體元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 頁面滾動(dòng)事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 頁面被卷去的頭部
// console.log(window.pageYOffset);
// 3 .當(dāng)我們頁面被卷去的頭部大于等于了 172 此時(shí) 側(cè)邊欄就要改為固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 當(dāng)我們頁面滾動(dòng)到main盒子，就顯示 goback模塊
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
頁面被卷去的頭部兼容性解決方案
需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：
- 聲明了 DTD，使用 document.documentElement.scrollTop
- 未聲明 DTD，使用 document.body.scrollTop
- 新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的時(shí)候 getScroll().left
三大系列總結(jié)
image.png
他們主要用法：
1.offset系列 經(jīng)常用于獲得元素位置 offsetLeft offsetTop
2.client經(jīng)常用于獲取元素大小 clientWidth clientHeight
3.scroll 經(jīng)常用于獲取滾動(dòng)距離 scrollTop scrollLeft
4.注意頁面滾動(dòng)的距離通過 window.pageXOffset 獲得
mouseenter 和mouseover的區(qū)別
- 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)就會(huì)觸發(fā)mouseenter 事件
- 類似 mouseover，它們兩者之間的差別是
- mouseover 鼠標(biāo)經(jīng)過自身盒子會(huì)觸發(fā)，經(jīng)過子盒子還會(huì)觸發(fā)。mouseenter 只會(huì)經(jīng)過自身盒子觸發(fā)
- 之所以這樣，就是因?yàn)閙ouseenter不會(huì)冒泡
- 跟mouseenter搭配鼠標(biāo)離開 mouseleave 同樣不會(huì)冒泡
動(dòng)畫函數(shù)封裝
1.6.1. 動(dòng)畫實(shí)現(xiàn)原理
核心原理：通過定時(shí)器 setInterval() 不斷移動(dòng)盒子位置。
實(shí)現(xiàn)步驟：
- 獲得盒子當(dāng)前位置
- 讓盒子在當(dāng)前位置加上1個(gè)移動(dòng)距離
- 利用定時(shí)器不斷重復(fù)這個(gè)操作
- 加一個(gè)結(jié)束定時(shí)器的條件
- 注意此元素需要添加定位，才能使用element.style.left
// 動(dòng)畫原理
// 1. 獲得盒子當(dāng)前位置
// 2. 讓盒子在當(dāng)前位置加上1個(gè)移動(dòng)距離
// 3. 利用定時(shí)器不斷重復(fù)這個(gè)操作
// 4. 加一個(gè)結(jié)束定時(shí)器的條件
// 5. 注意此元素需要添加定位， 才能使用element.style.left
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
// 停止動(dòng)畫 本質(zhì)是停止定時(shí)器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
簡單動(dòng)畫函數(shù)封裝:
如果多個(gè)元素都使用這個(gè)動(dòng)畫函數(shù)，每次都要var 聲明定時(shí)器。我們可以給不同的元素使用不同的定時(shí)器（自己專門用自己的定時(shí)器）。
核心原理：利用 JS 是一門動(dòng)態(tài)語言，可以很方便的給當(dāng)前對象添加屬性。
<body>
<button>點(diǎn)擊夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>
// var obj = {};
// obj.name = 'andy';
// 簡單動(dòng)畫函數(shù)封裝obj目標(biāo)對象 target 目標(biāo)位置
// 給不同的元素指定了不同的定時(shí)器
function animate(obj, target) {
// 當(dāng)我們不斷的點(diǎn)擊按鈕，這個(gè)元素的速度會(huì)越來越快，因?yàn)殚_啟了太多的定時(shí)器
// 解決方案就是 讓我們元素只有一個(gè)定時(shí)器執(zhí)行
// 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止動(dòng)畫 本質(zhì)是停止定時(shí)器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 調(diào)用函數(shù)
animate(div, 300);
btn.addEventListener('click', function() {
animate(span, 200);
})
</script>
</body>
