1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

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

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

圖片1.png

圖片2.png

1.1.2 offset 與 style 區(qū)別

offset

offset 可以得到任意樣式表中的樣式值
offset 系列獲得的數(shù)值是沒有單位的
offsetWidth 包含padding+border+width
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
所以，我們想要獲取元素大小位置，用offset更合適

style

style 只能得到行內樣式表中的樣式值
style.width 獲得的是帶有單位的字符串
style.width 獲得不包含padding和border 的值
style.width 是可讀寫屬性，可以獲取也可以賦值
所以，我們想要給元素更改值，則需要用style改變

因為平時我們都是給元素注冊觸摸事件，所以重點記住 targetTocuhes

1.1.3 案例：獲取鼠標在盒子內的坐標

我們在盒子內點擊，想要得到鼠標距離盒子左右的距離。
首先得到鼠標在頁面中的坐標（e.pageX, e.pageY）
其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
用鼠標距離頁面的坐標減去盒子在頁面中的距離，得到鼠標在盒子內的坐標
如果想要移動一下鼠標，就要獲取最新的坐標，使用鼠標移動

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坐標是' + x + ' y坐標是' + y;
})

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

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

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

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

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

? 4.鼠標松開，可以停止拖動模態(tài)框移動

1.1.5. 案例分析:

點擊彈出層，模態(tài)框和遮擋層就會顯示出來 display:block;
點擊關閉按鈕，模態(tài)框和遮擋層就會隱藏起來 display:none;
在頁面中拖拽的原理：鼠標按下并且移動，之后松開鼠標
觸發(fā)事件是鼠標按下mousedown，鼠標移動mousemove 鼠標松開 mouseup
拖拽過程: 鼠標移動過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框可以跟著鼠標走了
鼠標按下觸發(fā)的事件源是最上面一行，就是 id 為 title
鼠標的坐標減去鼠標在盒子內的坐標，才是模態(tài)框真正的位置。
鼠標按下，我們要得到鼠標在盒子的坐標。
鼠標移動，就讓模態(tài)框的坐標設置為：鼠標坐標減去盒子坐標即可，注意移動事件寫到按下事件里面。
鼠標松開，就停止拖拽，就是可以讓鼠標移動事件解除

 // 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. 點擊彈出層這個鏈接 link  讓mask 和login 顯示出來
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 點擊 closeBtn 就隱藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 開始拖拽
            // (1) 當我們鼠標按下， 就獲得鼠標在盒子內的坐標
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠標移動的時候，把鼠標在頁面中的坐標，減去 鼠標在盒子內的坐標就是模態(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) 鼠標彈起，就讓鼠標移動事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })

1.1.6 案例：仿京東放大鏡

整個案例可以分為三個功能模塊
鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
黃色的遮擋層跟隨鼠標功能。
移動黃色遮擋層，大圖片跟隨移動功能。

1.1.7. 案例分析:

黃色的遮擋層跟隨鼠標功能。
把鼠標坐標給遮擋層不合適。因為遮擋層坐標以父盒子為準。
首先是獲得鼠標在盒子的坐標。
之后把數(shù)值給遮擋層做為left 和top值。
此時用到鼠標移動事件，但是還是在小圖片盒子內移動。
發(fā)現(xiàn)，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半。
遮擋層不能超出小圖片盒子范圍。
如果小于零，就把坐標設置為0
如果大于遮擋層最大的移動距離，就把坐標設置為最大的移動距離
遮擋層的最大移動距離：小圖片盒子寬度減去遮擋層盒子寬度

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 當我們鼠標經過 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. 鼠標移動的時候，讓黃色的盒子跟著鼠標來走
    preview_img.addEventListener('mousemove', function(e) {
        // (1). 先計算出鼠標在盒子內的坐標
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 減去盒子高度 300的一半 是 150 就是我們mask 的最終 left 和top值了
        // (3) 我們mask 移動的距離
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐標小于了0 就讓他停在0 的位置
        // 遮擋層的最大移動距離
        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. 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
        // 大圖
        var bigIMg = document.querySelector('.bigImg');
        // 大圖片最大移動距離
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大圖片的移動距離 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

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

1.2.1 client概述

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

圖片3.png

圖片4.png

1.2.2. 淘寶 flexible.js 源碼分析

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

主要作用：創(chuàng)建一個獨立的作用域。避免了命名沖突問題

下面三種情況都會刷新頁面都會觸發(fā) load 事件。

1.a標簽的超鏈接

2.F5或者刷新按鈕（強制刷新）

3.前進后退按鈕

但是火狐中，有個特點，有個“往返緩存”，這個緩存中不僅保存著頁面數(shù)據(jù)，還保存了DOM和JavaScript的狀態(tài)；實際上是將整個頁面都保存在了內存里。

所以此時后退按鈕不能刷新頁面。

此時可以使用 pageshow事件來觸發(fā)。，這個事件在頁面顯示時觸發(fā)，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發(fā)后觸發(fā)；根據(jù)事件對象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件

注意這個事件給window添加。

1.3.元素滾動 scroll 系列

1.3.1. scroll 概述

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

圖片5.png

圖片6.png

1.3.2. 頁面被卷去的頭部

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現(xiàn)滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發(fā) onscroll事件。

1.3.3.案例：仿淘寶固定右側側邊欄

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

1.3.4.案例分析:

需要用到頁面滾動事件 scroll 因為是頁面滾動，所以事件源是document
滾動到某個位置，就是判斷頁面被卷去的上部值。
頁面被卷去的頭部：可以通過window.pageYOffset 獲得如果是被卷去的左側window.pageXOffset
注意，元素被卷去的頭部是element.scrollTop , 如果是頁面被卷去的頭部則是 window.pageYOffset
其實這個值可以通過盒子的 offsetTop可以得到，如果大于等于這個值，就可以讓盒子固定定位了

  //1. 獲取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面
        var bannerTop = banner.offsetTop
            // 當我們側邊欄固定定位之后應該變化的數(shù)值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 獲取main 主體元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 頁面滾動事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 頁面被卷去的頭部
            // console.log(window.pageYOffset);
            // 3 .當我們頁面被卷去的頭部大于等于了 172 此時 側邊欄就要改為固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 當我們頁面滾動到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
    };
 } 
使用的時候  getScroll().left

1.4. 三大系列總結

圖片7.png

他們主要用法：

1.offset系列經常用于獲得元素位置 offsetLeft offsetTop

2.client經常用于獲取元素大小 clientWidth clientHeight

3.scroll 經常用于獲取滾動距離 scrollTop scrollLeft

4.注意頁面滾動的距離通過 window.pageXOffset 獲得

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

當鼠標移動到元素上時就會觸發(fā)mouseenter 事件
類似 mouseover，它們兩者之間的差別是
mouseover 鼠標經過自身盒子會觸發(fā)，經過子盒子還會觸發(fā)。mouseenter 只會經過自身盒子觸發(fā)
之所以這樣，就是因為mouseenter不會冒泡
跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡

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

1.6.1. 動畫實現(xiàn)原理

核心原理：通過定時器 setInterval() 不斷移動盒子位置。

實現(xiàn)步驟：

獲得盒子當前位置
讓盒子在當前位置加上1個移動距離
利用定時器不斷重復這個操作
加一個結束定時器的條件
注意此元素需要添加定位，才能使用element.style.left

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

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

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

 function animate(obj, target) {
            // 當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
            // 解決方案就是 讓我們元素只有一個定時器執(zhí)行
            // 先清除以前的定時器，只保留當前的一個定時器執(zhí)行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止動畫 本質是停止定時器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

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

Web API --元素偏移量 offset 系列

Web API --元素偏移量 offset 系列

1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

1.1.2 offset 與 style 區(qū)別

offset

style

1.1.3 案例：獲取鼠標在盒子內的坐標

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

1.1.5. 案例分析:

1.1.6 案例：仿京東放大鏡

1.1.7. 案例分析:

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

1.2.1 client概述

1.2.2. 淘寶 flexible.js 源碼分析

1.3.元素滾動 scroll 系列

1.3.1. scroll 概述

1.3.2. 頁面被卷去的頭部

1.3.3.案例：仿淘寶固定右側側邊欄

1.3.4.案例分析:

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

1.4. 三大系列總結

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

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

1.6.1. 動畫實現(xiàn)原理

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

Web API --元素偏移量 offset 系列

**1.1. **元素偏移量 offset 系列

1.1.1 offset 概述

1.1.2 offset 與 style 區(qū)別

offset

style

1.1.3 案例：獲取鼠標在盒子內的坐標

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

1.1.5. 案例分析:

1.1.6 案例：仿京東放大鏡

1.1.7. 案例分析:

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

1.2.1 client概述

1.2.2. 淘寶 flexible.js 源碼分析

1.3.元素滾動 scroll 系列

1.3.1. scroll 概述

1.3.2. 頁面被卷去的頭部

1.3.3.案例：仿淘寶固定右側側邊欄

1.3.4.案例分析:

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

1.4. 三大系列總結

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

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

1.6.1. 動畫實現(xiàn)原理

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

1.1. 元素偏移量 offset 系列