PC端网页特效

元素偏移量offset系列

1. offset偏移量概述

使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

2. offset系列常用属性

• element.offsetParent: 返回作为该元素带有定位的父级元素
• element.offsetTop: 返回元素相对带有定位的父元素上方的偏移
• element.offsetLeft: 同上，但是左边框的偏移
• element.offsetWidth: 返回自身包括padding，边框，内容区的宽度，且不带单位

3. offset v.s. style

---

元素可视区client系列

1. client概述

client本身是客户端的意思，使用client系列相关属性可以获取元素可视区的相关信息, 动态的得到该元素边框大小，元素大小等。

2. client系列属性

• element.clientTop: 返回元素上边框的大小
• element.clientLeft: 返回元素左边框的大小
• element.clientWidth: 返回元素自身包括padding，内容区的宽度，但是不包含边框（这是和offset最大的区别)

---

元素滚动scroll系列

1. scroll系列属性

• element.scrollTop: 返回被卷上去的距离
• element.scrollLeft: 返回被卷去的左侧距离
• element.scrollWidth: 返回自身实际宽度，不包含边框，返回数值不带单位

2. onscroll事件

当浏览器的高或者宽度不足以显示整个页面的时候，会自动出现滚动条。滚动条在滚动时会触发onscroll事件。

---

【这里总结一下以上三种的异同！！】

[sum](确定元素位置总结 - 德芭贝贝同学今天code了吗 (noelleliu.github.io))

---

动画函数封装

通过setInterval（）不断移动盒子的位置就可以达到动画的效果。

节流阀

目的：为了防止轮播图按钮连续点击造成播放太快

本质：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

核心实现思路: 利用回调函数， 添加一个变量来控制，锁住和解锁函数。

伪代码：

​ var flag=true;//默认水龙头开着

​ if(flag) {

​ flag = false;

​ do something} //为了确保无法连续触发， 关闭水龙头

​ callback，flag=true；//利用回调函数执行动画完毕后，打开水龙头

代码参考：

Reference: (68条消息) JS的节流阀_前端节流阀_鹿小风的博客-CSDN博客