PC端网页特效

快来打我* 2023-07-13 03:16 11阅读 0赞

## 元素偏移量offset ##

动态得到相关元素的位置、大小  
1.获得元素距离带有定位的父元素的位置  
2.获得元素自身的大小  
返回的数值都不带单位  
offsetTop 可以得到元素的偏移 位置 返回的不带单位的数值  
offsetLeft  
offsetWidth 可以得到元素的大小 宽度和高度 是包含padding + border + width  
offsetHeight  
offsetParent 返回带有定位的父亲 否则返回的是body  
parentNode 返回父亲 是最近一级的父亲 不管父亲有没有定位

**offset与style的区别：** style只能得到行内样式表的样式值；style.width获得的是带有单位的字符串，offset获得的是数值；style.width不包含padding + border，offset包含；style.width可以赋值，offset不能赋值；所以获取值用offset，更改值用style

## 元素可视区client ##

通过client的属性可以得到相关元素的边框大小、元素大小等  
与offset的区别在于，client返回的宽度高度不包含边框；clientTop返回元素上边框的大小，clientLeft返回元素左边框的大小

## 元素滚动scroll ##

使用相关属性能得到该元素的大小、滚动距离等  
scrollTop：返回元素被卷曲的上测距离，返回值不带单位  
scrollLeft：返回元素被卷曲的左测距离，返回值不带单位  
scrollWidth：返回自身实际宽度（如果有超出的内容会被算到里面），不含边框，返回值不带单位  
scrollHeight：返回自身实际高度（如果有超出的内容会被算到里面），不含边框，返回值不带单位

window.pageYOffset：页面被卷去的头部  
window.pageXOffset：页面被卷去的左部

**三者的主要用法：**  
offset：用于获取元素位置 offsetTop、offsetLeft  
client：用于获取元素大小 clientWidth、clientHeight  
scroll：用于获取滚动距离 scrollTop、scrollLeft

## 动画 ##

通过定时器setInterval()不断移动盒子的位置  
**实现步骤：**  
1.获得当前盒子位置  
2.让盒子在当前位置加1个移动距离  
3.利用定时器不断重复这个操作  
4.加一个定时器结束的条件  
5.该元素一定要添加定位，才能使用style.left  
**动画函数的封装**  
需要的两个参数：动画对象和移动距离  
动画函数给不同元素记录不同定时器：给当前对象添加属性

**缓动动画**  
让元素运动速度有所变化，最常见是让元素慢慢停下来  
***原理：***

1.  让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2.  核心算法：（目标值-现在位置）/10 做为每次移动的距离，步长
3.  停止条件：让盒子位置等于目标位置就停止定时器

## 本地存储 ##

**特性：** 1.数据存储在用户浏览器中  
2.设置、读取方便、甚至页面刷新都不会丢失数据  
3.容量较大：sessionStorage约5M，localStorage约20M  
4.只能存储字符串，可以将对象JSON.stringfy()编码后存储

**window.sessionStorage**  
1.生命周期为关闭浏览器窗口  
2.同一个页面下数据可以共享  
3.以键值对的形式存储使用  
存储数据：sessionStorage.setItem(key,value);  
获取数据：sessionStorage.getItem(key);  
删除数据：sessionStorage.remove(key);  
删除所有数据：sessionStorage.clear();

**window.localStorage**  
1.生命周期永久生效，除非手动删除  
2.可以共享窗口  
3.以键值对的形式存储使用  
存储数据：localStorage.setItem(key,value);  
获取数据：localStorage.getItem(key);  
删除数据：localStorage.remove(key);  
删除所有数据：localStorage.clear();