JavaScript 网页特效

目录

PC 端网页特效

1. 元素偏移量 offset 系列

2. 元素可视区 client 系列

 3. 元素滚动 scroll 系列

4. 动画函数封装

移动端网页特效

1. 触摸事件

---

PC 端网页特效

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏、移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 注意： 返回的数值都不带单位

offset 系列常用属性：

offset系列属性	作用
element.offseParent	返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边看的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

2. 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位