1、元素偏移量offset概述及常用属性
offset和style的区别
offset案例:获取鼠标在盒子内的坐标
能拖动的登录框案例
放大镜案例(未完成)
2、元素可视区client (大小不包含边框,offset包含)
3、元素滚动scroll
window.pageYOffset——页面头部被卷去的数值(scroll是元素被卷去)
淘宝侧边栏案例
offset、client、scroll总结
offset返回元素大小包含边框,其余两个不包含;client和scroll的区别是:client只返回内容可视区,scroll返回实际大小,包含所有内容(因为有可能内容太多,需要卷轴拖动,scroll包含了全部内容)
4、动画函数封装
4.2 动画函数简单封装
设置两个参数,动画目标对象和移动距离,方便其他盒子调用这个动画函数
4.3优化 给不同对象设置不同定时器
避免每次调用都声明一个变量存放定时器而占内存,把变量改为对象的属性
优化 轮播图,点击后才能触发移动,如果不断点击按钮动的会越来越快,因为开启了很多个定时器,所以先清除定时器,再执行定时器,这样不管点多少次,都会先清除再执行,就永远只有一个定时器
4.4 缓动动画
4.5 缓动优化(前进倒退)
(目标值-现在的位置)/ 10,涉及到除法,容易出现小数,导致走不到终点位置,应该取整数,正着走往大取,往回走取小。做两个按钮可以实现前进倒退效果
4.6 动画函数添加回调函数
函数可以作为一个实参传输到另一个函数中,当那个函数执行完后再执行传输过去的函数,也就做回调函数
4.7 动画函数封装到JS文件里
引用动画函数实现缩放案例
轮播图案例!