JavaScript的知识总结(14)
网页特效,缓动动画函数封装
元素偏移量
offset
Top/Left,动态的获取位置,具有定位的父元素的距离,如果没有则以body为准offsetWidth/Height
可以获取元素的大小 包括padding,borderoffsetParent
返回带有定位的父亲,否则是body,parentNode
返回最近一级 的父亲
offset和style
- style只能得到行内样式表中的样式值,并且获取的属性值是有单位的
- 获取元素使用offset更合适,更改样式使用style
鼠标点击盒子后获取坐标
1 | <script> |
client系列
clientWidth
返回自身的宽度不包含边框,包含padding
立即执行函数
- 立即执行函数(function() {})() 或者(function(){}()),
- (function() {})() 第二个小括号可以看作调用函数
- (function(){}()), 多个立即执行函数要加
;
- 创建一个独立作用域,避免了命名冲突
放大镜效果
1 | <style> |
查看样式图例
scroll系列属性
- scrollTop/scrollLeft/ScrollWidth/scrollHeight
- overflow:auto 使滑动自动显示
- 页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset
- 注意,元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset
查看实例
1 | <body> |
查看图例
三大系列的对比
offsetWidth
返回自身,并且包括padding,border,不带单位,经常用于获取元素的位置clientWidth
返回自身,但是不包括border,包括padding,经常用于获取元素的大小scrollWidth
返回自身实际的宽度,元素的内容,但是不含边框返回数值不带单位 经常用于获取滚动的距离,注意
页面滚动 通过window.pageXoffset
获得,元素滚动距离通过scrollTop
或者scrollLeft
获取
mouseover和mouseenter的区别
mouseover
:鼠标经过自身盒子触发,子盒子也会触发mouseenter
:鼠标经过自身盒子才会触发,不会进行冒泡处理
动画函数的封装
- 动画原理:使用定时器+元素定位+元素offset
- 给不同元素指定不同的定时器
- 缓动动画的原理:使用动画缓动执行,使速度慢慢停下来(目标值-现在的位置)
- 缓动动画需要将步长值改为整数,使用Math.ceil函数 向上取整
- 缓动动画也可以添加回调函数
缓动匀速封装
1 | <style> |
缓动变速封装
1 | <style> |
缓动函数封装地址
【函数地址】
利用缓动函数做一个鼠标触碰后移动的案例
1 |
|
查看样式
缓动函数 - 匀速运动
- 在匀速运动的过程中设置每次移动的距离如果大于
1px
,会使最后的目标位置变大,并且在封装过程中,if判断必须设置为>=
,看一下样式效果 - 看控制台console(obj.offsetLeft)的值可以看出在设置匀速运动时,如果每次移动的距离大于1px,最后得到的距离左侧的位置大于目标位置,再做判断时要设置为对象距离左侧的位置
>=
目标位置
查看答案
- 缓动动画函数 封装 【地址】
代码展示
查看答案
1 | // 封装一个匀速或者变速的缓动文件 |
以上内容是我在实际操作过程中出现的问题
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论