js動(dòng)畫特效之元素的三大偏移量

offset系列（元素位置偏移量

使用（動(dòng)態(tài)的獲取元素的位置和大小

1. 獲得元素距離帶有定位父元素的位置

2. 獲得元素自身的大?。▽挾雀叨龋?
3. 注意：返回的數(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改變

client系列（元素可視區(qū)

這個(gè)家伙也是用來搞獲取元素的

1. 相關(guān)的屬性
   

scroll系列（元素滾動(dòng)系列

顧名思義，這個(gè)東西 是用來處理滾動(dòng)的

1. 相關(guān)的屬性

我們來一個(gè)精辟的總結(jié)

他們主要用法：

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 ?獲得

動(dòng)畫函數(shù)的封裝

我們?yōu)槭裁匆鲞@件事情？因?yàn)榘?，如果在一個(gè)動(dòng)畫中有很多地方都使用了這個(gè)動(dòng)畫函數(shù)。那么我們每次都要給var 聲明定時(shí)器，一定是一個(gè)麻煩的事情，所以我們干脆同樣的來一層的封裝

核心原理：利用 JS 是一門動(dòng)態(tài)語言，可以很方便的給當(dāng)前對象添加屬性。

 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);
        }

題外話，淘寶的flexible.js源碼分析

立即執(zhí)行函數(shù)?(function(){})()? 或者 (function(){}())

主要作用： 創(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事件

題外話

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ì)冒泡