元素偏移量offset系列
返回值都不帶單位
element.offsetParent? 返回作為該元素帶有定位的父級(jí)元素旋廷，如果父級(jí)都沒定位則返回body
element.offsetTop? 返回元素相對(duì)帶有定位父元素上方的偏移
element.offsetLeft? 返回元素相對(duì)帶有定位父元素左邊框的偏移
element.offsetWidth? 返回自身包括padding俺驶、邊框男摧、內(nèi)容區(qū)的寬度索绪，返回?cái)?shù)值不帶單位
element.offsetHeight? 返回自身包括padding契吉、邊框宅荤、內(nèi)容區(qū)的高度屑迂，返回?cái)?shù)值不帶單位
offset與style區(qū)別
offset可以得到任意樣式表中的樣式值
offset系列獲得的數(shù)值是沒有單位的
offsetWidth包含padding+border+width
offsetWidth等屬性是只讀屬性，智能獲取不能賦值
所以我們想要獲取元素的大小位置冯键，用offset更合適
style只能得到行內(nèi)樣式表中的樣式值
style.width獲得的是帶有單位的字符串
style.width獲得不包含padding惹盼、border
style.width是可讀寫屬性，可以獲取也可以賦值
所以我們想要給元素更改值惫确，則需要用style改變
鼠標(biāo)在頁(yè)面中的坐標(biāo)(e.pageX,e.pageY)
元素可視區(qū)client系列
element.clientTop? 返回元素上邊框的大小
element.clientLeft? 返回元素左邊框的大小
element.clientWidth? 返回自身包括padding手报、內(nèi)容區(qū)的寬度蚯舱，不含邊框，返回值不帶單位
element.clientHeigth? 返回自身包括padding掩蛤、內(nèi)容區(qū)的高度枉昏，不含邊框，返回值不帶單位
元素滾動(dòng)scroll 系列屬性
element.scrollTop? 返回被卷去的上側(cè)距離盏档，返回?cái)?shù)值不帶單位
element.scrollLeft? 返回被卷去的左側(cè)距離凶掰，返回?cái)?shù)值不帶單位
element.scrollWidth? 返回自身實(shí)際的寬度，不含邊框蜈亩，返回?cái)?shù)值不帶單位
element.scrollHeight? 返回自身實(shí)際的高度懦窘，不含邊框，返回?cái)?shù)值不帶單位
頁(yè)面被卷去的頭部稚配，滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā)onscroll事件畅涂。
頁(yè)面被卷去的頭部兼容性解決方案:
聲明了DTD，使用document.documentElement.scrollTop
未聲明DTD道川，使用document.body.scrollTop
新方法午衰，window.pageXOffset和window.pageYOffset
function getScroll (){
? ? return {
? ? ? left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
? ? ? top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
? ? ? };
}
getScroll().left調(diào)用
offset系列經(jīng)常用來(lái)獲取元素位置offsetLeft 、offsetTop
client 系列經(jīng)常用來(lái)獲取元素大小clientWidth冒萄、clientHeight
scroll系列經(jīng)常用來(lái)獲取滾動(dòng)的距離scrollTop臊岸、scrollLeft
頁(yè)面的滾動(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只經(jīng)過自身盒子觸發(fā)帅戒，之所以這樣是因?yàn)閙ouseenter不會(huì)冒泡，跟mouseenter搭配崖技，mouseleave同樣不會(huì)冒泡逻住。
動(dòng)畫函數(shù)封裝
核心原理:通過定時(shí)器setInterval()不斷的移動(dòng)盒子的位置
實(shí)現(xiàn)步驟:獲得盒子當(dāng)前位置
讓盒子在當(dāng)前位置加上一個(gè)移動(dòng)距離
利用定時(shí)器不斷重復(fù)這個(gè)操作
加一個(gè)結(jié)束定時(shí)器的條件
注意此元素需要添加定位，才能使用element.style.left
動(dòng)畫函數(shù)簡(jiǎn)單封裝-需要傳遞兩個(gè)參數(shù)迎献，動(dòng)畫對(duì)象和移動(dòng)到的距離
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);
}
緩動(dòng)效果原理:讓盒子每次移動(dòng)的距離變小瞎访，速度快就會(huì)慢下來(lái)
核心算法:(目標(biāo)值-現(xiàn)在的位置)/10? 作為每次移動(dòng)距離的步長(zhǎng)
停止的條件:讓當(dāng)前盒子位置等于目前位置就停止定時(shí)器
注意步長(zhǎng)值需要取整，一般向上取整Math.ceil()
function animate(obj,target,callback) {
? ? clearInterval(obj.timer);
? ? obj.timer = setInterval(function () {
? ? var step = (target-obj.offsetLeft)/10;
? ? step = step>0?Math.ceil(step):Math.floor(step);
? ? ? ? if(obj.offsetLeft == target) {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? //if(callback) {
? ? ? ? ? ? //? callback();
? ? ? ? ? // }
? ? ? ? ? ? callback&&callback();
? ? ? ? }
? ? ? ? ? obj.style.left = obj.offsetLeft + step +'px';
? ? ? },15);
}
節(jié)流閥吁恍，防止輪播圖連續(xù)點(diǎn)擊造成播放過快扒秸。
核心原理:利用回調(diào)函數(shù)，添加一個(gè)變量來(lái)控制践盼，鎖住函數(shù)或解鎖函數(shù)鸦采。
開始聲明一個(gè)變量? var flag=true;
if (flag) {flag=false; do something);關(guān)閉水龍頭
利用回調(diào)函數(shù):動(dòng)畫執(zhí)行完畢，flag=true;打開水龍頭
在動(dòng)畫函數(shù)animate里面添加回調(diào)函數(shù)function (){ flag=true;}
返回頂部? window.scroll(x,y)
