PC端网页特效(三大系列+动画函数封装)

目录

1.三大系列

元素偏移量offset系列

offset与style区别

client系列

立即执行函数

scroll系列

总结

mouseenter和mouseover区别

2.动画函数封装

动画原理

简单动画函数封装

缓动动画原理

回调函数

轮播图

节流阀

页面滚动到顶部

---

1.三大系列

元素偏移量offset系列

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

获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度和高度）

返回的数值都不带单位

element.offsetParent   返回该元素带有定位的父级元素，如果父级没有定位返回body

element.offsetTop  返回元素带有定位的父级元素上方的偏移；没有父级元素或者父级元素没有定位返回body

element.offsetLeft   返回元素带有定位的父级元素左边框的距离

element.offsetWidth   包括自身的padding值、margin值 padding+margin+width

element.offsetHeight

其中，之前学过的节点中，element.parentNode返回的也是父元素，但它返回的是丽自己最近的父级元素

offset与style区别

style只能得到行内样式（嵌入式）否则没有样式；获得的数值带有单位；得到宽度时不包括padding和margin

唯一一点是offset 是只读属性，不能复制 ，而style可以获取也可以赋值

获取元素大小用offset，更改元素值用style

获取鼠标在盒子内的坐标

首先得到鼠标在页面中的坐标（e.pageX，e.pageY）

其次得到盒子在页面中的距离（box.offsetLeft，box.offsetTop）

用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标

client系列

element.clienWidth  返回自身包含的padding值、内容区域的宽度，不包含边框、返回数值不带单位

与offset的区别就在于，client的返回值不包含边框

立即执行函数

不需要单独调用，立即就能执行

(function() {})()  或者   (function(){}())

两种形式中的最后一个小括号是用来传递参数的，可以把实参写进去，也可以认为它是调用函数的；在第一个小括号前可以设置函数名

立即执行函数的最大作用就是，独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况，但是每个立即执行函数之间必须用分号隔开

淘宝flexible.js源码分析

pageshow是重新加载页面触发的事件

persisted返回的是true就是说如果这个页面是从缓存取过来的页面，也需要重新计算一下rem的大小

scroll系列

element.scrollHeight 返回的是自身的实际高度（包括里面的内容高度），不包含边框，返回数值不带单位

element.scrollHeight  指的是全部内容的高度，因为内容太多时，可能会超出边框

element.scrollTop  指的就是超出的内容高度距离上边框的高度 

在样式中可以添加上overflow:auto，就可以显示出滚动条

scroll也是一种触发事件

总结

offsetWidth  返回自身值包括padding、边框值、内容的宽度，返回数值不带单位

clientWidth  返回自身包括padding、内容的宽度、不含边框，返回数值不带单位

scrollWidth  返回自身实际的宽度，不含边框，返回数值不带单位

mouseenter和mouseover区别

当鼠标移动到元素上就会触发mouseenter事件，类似于mouseover

区别：mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，而mouseenter只会经过自身盒子触发，因为mouseenter不会冒泡

2.动画函数封装

动画原理

简单动画函数封装

设置形参obj目标对象和target目标位置，目标对象可以简单理解为时要进行动画移动的物体，而target就是物体要运动到的某一点，在该点处停止，在调用函数的时候放入实参即可

function animate(obj,target){}

可以直接将timer给obj，这样既节省空间，也方便定义不同的对象；为了防止每点击一次按钮，动画就重新开始执行，可以再代码块最上方放一个清除器

缓动动画原理

让物体移动的速度慢下来

核心算法：（目标值-现在的位置）/10，以该值作为每次移动的距离步长

将步长写进定时器里面，吧每次加1改成加步长

固定频率移动和缓动的区别就在于，所加的数值，一个是固定值，一个是变化值

不出现小数，采用三重判断条件式来进行判断，利用的是向上取整Math.ceil()和向下取整Math.floor在两个数值之间可以做到向前移动，也可以做到向后移动，分别对应不同的取整方式

可以制作两个按钮，每个按钮对应的截至位置不一样，可以实现在这两个位置之间的来回移动

回调函数

设置回调函数，可以在代码执行完毕后，进入另一个执行框内

轮播图

当鼠标经过focus区时，左右两侧的箭头显示出来，离开时再隐藏

给其设置了定时器

生成动态小圆圈，不固定化，就是有多少张图片设置多少个小圆圈，通过for循环利用子元素长度来设置小圆圈

点击某个小圆圈，该小圆圈就显示出来，利用排他思想，将所有小圆圈的类名全部清除，再给所点击的小圆圈设置类名，即可到达效果

点击小圆圈，让图片跟着移动

再接受li时，就接受其索引值，在此处即可用小圆圈的索引号乘图片的宽度，因为点击右边按钮，图片是向左边移动的，所以该值是负值

克隆一张照片

要想实现点击到最后一张重新回到第一张的的播放效果，可以在图片的最后面克隆一张第一张照片element.cloneNode(true)

在此处每点击一下按钮，设置一个变量让其加一；同样也给小圆圈设置一个变量，每点击一次，进行加一

左侧按钮做法相同

调用函数和自动播放轮播图

自动播放 element.click()

节流阀

防止轮播图按钮连续点击造成播放过快

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

利用回调函数，添加一个变量来控制，锁住函数和解锁函数

短路运算符应用

要求两者都为true,前者为true时，后者才进行调用

页面滚动到顶部

window.scroll(x,y)  想返回的位置坐标