1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

offset 翻譯過來就是偏移量，我們使用 offset系列相關(guān)屬性可以動(dòng)態(tài)的得到該元素的位置（偏移）、大小等。

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

獲得元素自身的大?。▽挾雀叨龋?/li>
注意：返回的數(shù)值都不帶單位

image.png

1.1.2 offset 與 style 區(qū)別

offset

offset 可以得到任意樣式表中的樣式值

offset 系列獲得的數(shù)值是沒有單位的

offsetWidth 包含padding+border+width

offsetWidth 等屬性是只讀屬性，只能獲取不能賦值

所以，我們想要獲取元素大小位置，用offset更合適

style

style.width 獲得的是帶有單位的字符串

style.width 獲得不包含padding和border 的值

style.width 是可讀寫屬性，可以獲取也可以賦值

所以，我們想要給元素更改值，則需要用style改變
因?yàn)槠綍r(shí)我們都是給元素注冊(cè)觸摸事件，所以重點(diǎn)記住 targetTocuhes

1.1.3 案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

我們?cè)诤凶觾?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;
})

1.1.4 案例：模態(tài)框拖拽

彈出框，我們也稱為模態(tài)框。

1.點(diǎn)擊彈出層，會(huì)彈出模態(tài)框，并且顯示灰色半透明的遮擋層。

2.點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉灰色半透明遮擋層。

3.鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動(dòng)。

4.鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)

1.1.5. 案例分析:

點(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');
        var title = document.querySelector('#title');
        // 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);
            })
        })

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

1.2.1 client概述

client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client
系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。

image.png

1.2.2. 淘寶 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ù)事件對(duì)象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件

注意這個(gè)事件給window添加。

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

1.3.1. scroll 概述

scroll 翻譯過來就是滾動(dòng)的，我們使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。

image.png

1.3.2. 頁面被卷去的頭部

如果瀏覽器的高（或?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事件。

1.3.3.案例：仿淘寶固定右側(cè)側(cè)邊欄

原先側(cè)邊欄是絕對(duì)定位
當(dāng)頁面滾動(dòng)到一定位置，側(cè)邊欄改為固定定位
頁面繼續(xù)滾動(dòng)，會(huì)讓返回頂部顯示出來

1.3.4.案例分析:

需要用到頁面滾動(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';
            }

        })

1.3.5.頁面被卷去的頭部兼容性解決方案

需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

聲明了 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

1.4. 三大系列總結(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 獲得

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

1.6. 動(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

1.6.2. 動(dòng)畫函數(shù)給不同元素記錄不同定時(shí)器

如果多個(gè)元素都使用這個(gè)動(dòng)畫函數(shù)，每次都要var 聲明定時(shí)器。我們可以給不同的元素使用不同的定時(shí)器（自己專門用自己的定時(shí)器）。

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

 function animate(obj, target) {
            // 當(dāng)我們不斷的點(diǎn)擊按鈕，這個(gè)元素的速度會(huì)越來越快，因?yàn)殚_啟了太多的定時(shí)器
            // 解決方案就是 讓我們?cè)刂挥幸粋€(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);
        }

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

webAPI-day-05(元素偏移量offset，client，scroll，動(dòng)畫函數(shù)，)

webAPI-day-05(元素偏移量offset，client，scroll，動(dòng)畫函數(shù)，)

1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

1.1.2 offset 與 style 區(qū)別

1.1.3 案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

1.1.4 案例：模態(tài)框拖拽

1.1.5. 案例分析:

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

1.2.1 client概述

1.2.2. 淘寶 flexible.js 源碼分析

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

1.3.1. scroll 概述

1.3.2. 頁面被卷去的頭部

1.3.3.案例：仿淘寶固定右側(cè)側(cè)邊欄

1.3.4.案例分析:

1.3.5.頁面被卷去的頭部兼容性解決方案

1.4. 三大系列總結(jié)

1.5. mouseenter 和mouseover的區(qū)別

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

1.6.1. 動(dòng)畫實(shí)現(xiàn)原理

1.6.2. 動(dòng)畫函數(shù)給不同元素記錄不同定時(shí)器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

webAPI-day-05(元素偏移量offset，client，scroll，動(dòng)畫函數(shù)，)

1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

1.1.2 offset 與 style 區(qū)別

1.1.3 案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

1.1.4 案例：模態(tài)框拖拽

1.1.5. 案例分析:

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

1.2.1 client概述

1.2.2. 淘寶 flexible.js 源碼分析

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

1.3.1. scroll 概述

1.3.2. 頁面被卷去的頭部

1.3.3.案例：仿淘寶固定右側(cè)側(cè)邊欄

1.3.4.案例分析:

1.3.5.頁面被卷去的頭部兼容性解決方案

1.4. 三大系列總結(jié)

1.5. mouseenter 和mouseover的區(qū)別

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

1.6.1. 動(dòng)畫實(shí)現(xiàn)原理

1.6.2. 動(dòng)畫函數(shù)給不同元素記錄不同定時(shí)器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

webAPI-day-05(元素偏移量offset，client，scroll，動(dòng)畫函數(shù)，)