JavaScript——pc端网页特效

1、元素偏移量offset

1.1、offset概述

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

• 获得元素距离带有定位父元素的位置（如果父元素没有定位，则是距离body 文档的位置（偏移量））
• 获得元素自身的大小（宽度高度）——包括边距padding margin等
• 注：返回的数值不带单位

1.2、offset的常用方法

  

 1.3、offset和style的区别

• 获取元素用offset 只可获取 不能赋值
• 改变元素大小用style style属性可读写 

  

2、元素可视区client

2.1、可视区概述和属性

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

2.2、clientWidth和offsetWidth的区别

• clientWidth的返回值不包含边框
• 返回数值也不带单位

2.3、立即执行函数

不需要调用，立即执行。

格式：（function（形参）{ }）（实参）

（function（形参）{}（实参））

3、元素滚动scroll

3.1、滚动Scroll概述

scroll滚动的，相关系列属性和可以动态的得到该元素的大小、滚动距离等。

srollWidth得到的是该元素真正内容的大小，包括盒子外的内容。

3.2、onscroll事件

内容超出盒子时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏的高度，被称为页面被卷去的头部。滚动条在滚动时会触发onscoll事件。

4、mouseenter和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter事件

• mouseover鼠标经过自身盒子会触发，经过子盒子也会触发
• mouseenter只有经过自身盒子才会触发 因为mouseenter不会冒泡
• 跟mouseenter搭配鼠标离开-mouseleave同样也不会冒泡

  

5、动画函数封装

5.1、动画实现原理

通过定时器setInterval（）不断移动盒子位置。

实现步骤：

1、获得盒子当前位置

2、让盒子在当前位置加上1个移动距离

3、利用定时器不断重复整个操作

4、加一个结束定时器的条件

5、注意：该元素需加定位才能使用 style.left

5.2、动画函数封装

5.3、缓动动画效果

让元素运动速度有所变化

原理公式：目标值-现在的位置/10

停止条件：让当前盒子位置的等于目标位置时就停止定时器