js实现网页特效
文章目录
- 一、元素偏移量offest系列
- 🥇offset与style的区别
- 🎓案例1
- 🦹🏽♂️案例2
- 🐼案例3
- 二、元素可视区client系列
- 三、元素滚动scroll系列
- 🏂🏿案例4：
- 🔭补充 mouseenter事件
- 四、动画函数封装
- 💎动画函数简单封装操作
- ☯️缓动动画原理
- 🎅🏾缓动动画多个目标之间移动
- 🍂动画函数添加回调函数
- 🦦动画函数封装到单独JS文件里面
一、元素偏移量offest系列
offset系列相关属性可以动态的得到该元素的位置（偏移量）、大小等
- 获取元素举例带有定位父元素的位置
- 获取元年苏自身的大小（宽度，高度）
- 注意：返回的数值都不带单位
实际运用：
Document
结果如下：
🥇offset与style的区别
Document
🎓案例1
获取鼠标在盒子内的坐标
Document
效果如下：
🦹🏽♂️案例2
模态框拖拽
效果如下：
中间模块可拖动
🐼案例3
京东放大镜（是前两个案例的综合实现）
需要可以去该地址下载
https://download.csdn.net/download/qq_39321234/87376880
二、元素可视区client系列
作用：获取元素的大小，边框的大小
client和offset最大的区别就是不包含边框
Document
立即执行函数：
不需要调用，能够了立马自己执行
立即执行函数最大的作用就算独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况
语法1：
语法2：
示例：
Document
三、元素滚动scroll系列
作用：可以动态的得到元素的大小，滚动举例等
示例：
Document 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
🏂🏿案例4：
仿淘宝固定侧边栏（有兼容性问题）
Document 返回顶部头部区域banner区域主体部分
存在侧边栏文字显示不出来的问题，可以通过封装自定义函数解决
🔭补充 mouseenter事件
当鼠标移动到元素上就会触发mouseenter事件
类似mouseover,两者事件的区别是
mouseenter鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发
四、动画函数封装
核心原理：
通过定时器setInterval()不断移动盒子位置
Document
💎动画函数简单封装操作
动画函数封装的好处：
可以个模块同时使用，不相互冲突
示例：
Document
具体效果为两个小块同向匀速运动
动画中必须加定位，absolute和relative都可以
利用给对象添加属性的方法对函数进行赋值操作
但程序存在一个小bug
例如下面这段代码：
Document
点击次数越多，紫块走得越快
解决方法就是每次调用函数前清除以前的定时器，保留当前的定时器执行
添加如下代码：
clearInterval(obj.timer)
☯️缓动动画原理
缓动动画就是让元素的运动速度有变化，最常见的是让速度慢慢停下来
核心算法：
（目标值-现在的位置）/10 作为每次移动的步长
Document
🎅🏾缓动动画多个目标之间移动
Document
因为小数的原因不会回到原位
所以需要一个判断条件
step = step > 0 ? Math.ceil(step) : Math.floor(step);
🍂动画函数添加回调函数
Document 夏雨荷
🦦动画函数封装到单独JS文件里面
因为以后经常使用动画特效，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件
在此处下载资料
https://download.csdn.net/download/qq_39321234/87378744