参考哔哩哔哩pink教师课程

1. 元素偏移量 offset 系列

1.1 offset 概述

offset翻译过来便是偏移量，咱们运用offset系列相关特色能够动态的得到该元素的方位（偏移）、巨细等。

取得元素间隔带有定位父元素的方位
取得元素本身的巨细（宽度高度）
留意：回来的数值都不带单位

offset 系列常用特色：

offset系列特色	效果
`element.offsetParent`	回来作为该元素带有定位的父级元素假如父级都没有定位则回来body
`element.offsetTop`	回来元素相对带有定位父元素上方的偏移，回来的数值不带单位
`element.offsetLeft`	回来元素带有定位父元素左边框的偏移，回来的数值不带单位
`element.offsetWidth`	回来本身包含 `padding`、边框`border`、内容区的宽度`width`，回来数值不带单位
`element.offsetHeight`	回来本身包含 `padding`、边框`border`、内容区的宽度`width`，回来数值不带单位

offsetParent 和 parentNode 的差异：
offsetParent 回来的是 带有定位的父亲，不然回来 body
parentNode 回来的是 最近一级的父亲（亲爸爸） 不论父亲有没有定位

1.2 offset 与 style 差异

1.2.1 offset

offset能够得到恣意款式表中的款式值
offset系列取得的数值是没有单位的数字型
offsetWidth 包含padding+border+width
offsetWidth等特色是只读特色，只能获取不能赋值
所以，咱们想要获取元素巨细方位，用offset更适宜

1.2.2 style

style只能得到行内款式表中的款式值
style.width取得的是带有单位的字符串
style.width取得不包含padding和border的值
style.width是可读写特色，能够获取也能够赋值
所以，咱们想要给元素更改值，则需求用style改变

事例：获取鼠标在盒子内的坐标

事例剖析：

咱们在盒子内点击，想要得到鼠标间隔盒子左右的间隔
首要得到鼠标在页面中的坐标（e.pageX，e.pageY）或者（e.offsetX，e.offsetY）
其次得到盒子在页面中的间隔（box.offsetLeft，box.offsetTop）
用鼠标间隔页面的坐标减去盒子在页面中的间隔，得到鼠标在盒子内的坐标
假如想要移动一下鼠标，就要获取最新的坐标，运用鼠标移动事情 mousemove

方法一：

<body>
    <div class="box"></div>
    <script>
        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;
        })
    </script>
</body>

方法二：

    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mousemove',function(e){
            var x = e.offsetX;
            var y = e.offsetY;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })
    </script>

事例：模态框拖拽

弹出框，咱们也称为模态框

点击弹出层，会弹出模态框，而且显现灰色半透明的遮挡层
点击关闭按钮，能够关闭模态框，而且同时关闭灰色半透明遮挡层
鼠标放到模态框最上面一行，能够按住鼠标拖拽模态框在页面中移动
鼠标松开，能够中止拖动模态框移动

事例剖析：

点击弹出层，模态框和遮挡层就会显现出来 display: block;
点击关闭按钮，模态框和遮挡层就会躲藏起来 display: none;
在页面中拖拽的原理：鼠标按下而且移动，之后松开鼠标
触发事情是鼠标按下 mousedown，鼠标移动 mousemove，鼠标松开 mouseup
拖拽过程：鼠标移动过程中，取得最新的值赋值给模态框的 left 和 top 值，这样模态框能够跟着鼠标走了
鼠标按下触发的事情源是最上面一行，便是 id 为 title
鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的方位。
鼠标按下，咱们要得到鼠标在盒子的坐标。
鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，留意移动事情写到按下事情里边。
鼠标松开，就中止拖拽，便是能够让鼠标移动事情解除

2. 元素可视区 client 系列

2.1 界说

client翻译过来便是客户端，咱们运用client系列的相关特色来获取元素可视区的相关信息。通过client系列的相关特色能够动态的得到该元素的边框巨细、元素巨细等。

client系列特色	效果
`element.clientTop`	回来元素上边框的巨细
`element.clientLeft`	回来元素左边框大巨细
`element.clientWidth`	回来本身包含`padding`、内容区的宽度，不含边框，回来数值不带单位
`element.clientHeight`	回来本身包含`padding`、内容区的高度，不含边框，回来数值不带单位

2.2 事例：淘宝flexible.js源码剖析

首要效果：创立一个独立的效果域。

2.2.1 当即履行函数

当即履行函数是指函数界说好后，不需求调用直接履行。即一引入 JS 文件，则该函数自动履行。

语法：

当即履行函数: 不需求调用，立马能够自己履行的函数
写法:也能够传递参数进来 (function() {})()或者(function(){}()) ，第二个小括号能够看做是调用函数
当即履行函数最大的效果便是 独立创立了一个效果域 ，里边一切的变量都是局部变量，不会有命名抵触的状况

2.2.2 pageShow 事情

下面三种状况都会改写页面都会触发load 事情。

a标签的超链接
F5或者改写按钮（强制改写）
行进撤退按钮

可是火狐中，有个特色，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了 DOM 和 JavaScript 的状态；实践上是将整个页面都保存在了内存里。

所以此刻撤退按钮不能改写页面。

此刻能够运用pageshow事情来触发。这个事情在页面显现时触发，不管页面是否来自缓存。在从头加载页面中，pageshow会在load事情触发后触发；根据事情目标中的persisted来判别是否是缓存中的页面触发的 pageshow事情（回来 true 或者 false），留意这个事情给window添加。

多个当即履行函数间要加分号;隔开。

(function flexible(window, document) {
    // 获取的html 的根元素
    var docEl = document.documentElement
        // dpr （device pixel ratio） 物理像素比/设备像素比
    var dpr = window.devicePixelRatio || 1
    // adjust body font size  设置咱们body 的字体巨细
    function setBodyFontSize() {
        // 假如页面中有body 这个元素 就设置body的字体巨细
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 假如页面中没有body 这个元素，则等着 咱们页面首要的DOM元素加载完毕再去设置body
            // 的字体巨细
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();
    // set 1rem = viewWidth / 10    设置咱们html 元素的文字巨细
    // 把 rem 划分成十等份
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }
    setRemUnit()
    // reset rem unit on page resize  当咱们页面尺寸巨细发生变化的时分，要从头设置下rem 的巨细，调用上面的函数
    window.addEventListener('resize', setRemUnit)
        // pageshow 是咱们从头加载页面触发的事情
    window.addEventListener('pageshow', function(e) {
        // e.persisted 回来的是true 便是说假如这个页面是从缓存取过来的页面，也需求从头计算一下rem 的巨细
        // 照顾各个浏览器
        if (e.persisted) {
            setRemUnit()
        }
    })
    // detect 0.5px supports  有些移动端的浏览器不支持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))

3. 元素翻滚 scroll 系列

3.1 元素 scroll 系列特色

scroll翻译过来便是翻滚的，咱们运用scroll系列的相关特色能够动态的得到该元素的巨细、翻滚间隔等。

scroll系列特色	效果
`element.scrollTop`	回来被卷上去的上侧间隔，（从边框下沿开端计算）回来数值不带单位
`element.scrollLeft`	回来被卷上去的左边间隔，回来数值不带单位
`element.scrollWidth`	回来本身实践宽度，不含边框，包含`padding`，回来数值不带单位
`element.scrollHeight`	回来本身实践高度，不含边框，包含`padding`，回来数值不带单位

3.2 页面被卷去的头部

假如浏览器的高（或宽）度不足以显现整个页面时，会自动出现翻滚条。当翻滚条向下翻滚时，页面上面被躲藏掉的高度，咱们就称为页面被卷去的头部。翻滚条在翻滚时会触发onscroll事情。

获取页面被卷去的头部：

页面被卷去的头部：能够通过window.pageYOffset取得，假如是被卷去的左边window.pageXOffset
留意，元素被卷去的头部是element.scrollTop，左边element.scrollLeft

3.3 事例：仿淘宝固定右侧侧边栏

需求：

原先侧边栏是肯定定位
当页面翻滚到必定方位，侧边栏改为固定定位
页面持续翻滚，会让回来顶部显现出来

事例剖析：

需求用到页面翻滚事情scroll由于是页面翻滚，所以事情源是document
翻滚到某个方位，便是判别页面被卷去的上部值。
页面被卷去的头部：能够通过window.pageYOffset取得，假如是被卷去的左边window.pageXOffset
留意，元素被卷去的头部是element.scrollTop, 假如是页面被卷去的头部则是window.pageYOffset
其实这个值能够通过盒子的offsetTop能够得到，假如大于等于这个值，就能够让盒子固定定位了

3.4 页面被卷去的头部兼容性解决方案

需求留意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

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

4. 三大系列总结

4.1 比照

三大系列巨细比照	效果
`element.offsetWidth`	回来本身包含`padding`、边框、内容区的宽度，回来数值不带单位
`element.clientWidth`	回来本身包含`padding`、内容区的宽度，不含边框，回来数值不带单位
`element.scrollWidth`	回来本身实践的宽度，不含边框，回来数值不带单位

4.2 首要用法

offset系列常常用于取得元素方位offsetLeft、offsetTop
client常常用于获取元素巨细clientWidth、clientHeight
scroll常常用于获取翻滚间隔scrollTop、scrollLeft
留意页面翻滚的间隔通过window.pageYOffset取得

5. mouseenter 和 mouseover 的差异

当鼠标移动到元素上时就会触发mouseenter事情
相似mouseover，它们两者之间的差别是
mouseover鼠标通过本身盒子会触发，通过子盒子还会触发。mouseenter只会通过本身盒子触发
之所以这样，便是由于mouseenter不会冒泡
跟mouseenter调配鼠标离开mouseleave同样不会冒泡

PC 端网页特效（上）

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 与 style 差异

1.2.1 offset

1.2.2 style

2. 元素可视区 client 系列

2.1 界说

2.2 事例：淘宝flexible.js源码剖析

2.2.1 当即履行函数

2.2.2 pageShow 事情

3. 元素翻滚 scroll 系列

3.1 元素 scroll 系列特色

3.2 页面被卷去的头部

3.3 事例：仿淘宝固定右侧侧边栏

3.4 页面被卷去的头部兼容性解决方案

4. 三大系列总结

4.1 比照

4.2 首要用法

5. mouseenter 和 mouseover 的差异

作者信息

PC 端网页特效（上）

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 与 style 差异

1.2.1 offset

1.2.2 style

2. 元素可视区 client 系列

2.1 界说

2.2 事例：淘宝flexible.js源码剖析

2.2.1 当即履行函数

2.2.2 pageShow 事情

3. 元素翻滚 scroll 系列

3.1 元素 scroll 系列特色

3.2 页面被卷去的头部

3.3 事例：仿淘宝固定右侧侧边栏

3.4 页面被卷去的头部兼容性解决方案

4. 三大系列总结

4.1 比照

4.2 首要用法

5. mouseenter 和 mouseover 的差异

相关文章

三 音视频开发 —— AVStream

Shell在日常工作中的应用实践

【ChatGPT】一文教你怎么编写清晰有效的（Prompt）提示词~

从美团的开发通道合并谈谈开发的职业规划

作者信息

三音视频开发 —— AVStream