智能社JS笔记--运动技术.docVIP

15.JS运动基础-1 运动：让物体动起来 让DIV动起来（匀速运动） 对定时器的使用 给div加绝对定位 offsetLeft 问题：到达某个特定位置停下来 解决：做判断，符合条件时关掉定时器（存定时器timer） 速度变慢（一般不动时间，而是改数字—速度） 用变量存速度 问题：取7时，offsetLeft没有等于300的时候，div停不下来 解决：=300 //停在301 问题：到300后点击按钮还继续走 原因：点按钮，执行函数，开定时器（执行当前函数—至少执行一次） 解决：加else（没有到达目标之前才执行） 问题：连续点击，速度变快 原因：每点击一次就开一个定时器，点击几次就有几个定时器同时工作 解决：保证每次只有一个定时器工作，先clearInterval（） 运动框架类似吃饭框架 原则：1.开始运动时关闭原有定时器 2.把运动和停止分开（if/else） 运动框架实例 “分享到”侧边栏 div绝对定位，收在里面—left：-150px；span绝对定位 鼠标移入，速度10，终点0 鼠标移出，速度-10，终点-150 优化合并：最大区别：目标不同，速度不同——传参 继续简化：功能一模一样，参数越少越好——干掉速度 做法：通过当前位置和目标点的关系 if（iDiv.offsetLeftiTarget） { speed=-10 } else { speed=10 } 淡入淡出图片 动的是透明度 透明度IE——filter：alpha（opacity：30） chrome——opacity：0.3 var alpha=30 //单纯的变量，不是透明度 把变量alpha赋给透明度 oDiv.style.filter=‘alpha（opacity：‘+alpha+’）’； oDiv.style.opacity=alpha/100； 16.JS运动基础-2 缓冲运动 逐渐变慢，最后停止 距离越远速度越大 速度有距离决定 速度=（目标值-当前值）/缩放系数 如果没有缩放系数，速度太大，瞬间到达终点，没有过程 问题：并没有真正到达300 原因：速度只剩0.9 //像素是屏幕能够显示的最小单位，并不会四舍五入，直接舍掉 Math.ceil（）向上取整 Math.floor（）向下取整 问题：向左走，又差一块——Math.floor（） 判断：三目 speed=speed0？Math.ceil（speed）：Math.floor（speed） 例子：右侧悬浮框 scrollTop=document.documentElement.scrollTop||document.body.scrollTop； 问题：抖动 解决：用运动缓缓过去，缓冲运动 对联悬浮框 计算高度 问题：抖动 原因：目标点不是整数 解决：parseInt（） 匀速运动的停止条件 问题：抖动 原因：没法精确到100 绝对值Math.abs（） 不足7个，关闭定时器，left等于目标点（两点重合） 17.JS运动应用-1 多物体运动框架：多个div，鼠标移入变宽 运动框架传参obj，知道让哪个物体动起来 用到缓冲一定要取整 问题：div没运动回去 //清除前一个定时器 原因：只有一个定时器 解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性 多个div淡入淡出 首先关闭物体上的定时器 问题：不是因为定时器，而是因为alpha 经验：多物体运动框架所有东西都不能共用 解决：作为属性加到物体上 //不以变量形式存在 offset的bug 加border变宽 offsetWith并不是真正的width，它获取的是盒模型尺寸 解决：躲着 宽度扔到行间，parseInt（oDiv.style.width） 进一步解决：getStyle（obj，name） currentStyle，getComputedStyle 加border，只要offset就有问题 去掉offset 合并框架 变宽和变高 [‘height’] 给运动框架加个参数attr 更神奇：变文字大小、变borderWidth 任意值运动框架 问题：最常用运动做不了，透明度 原因：parseInt（），opacity是小数、px 判断 var cur=0 if（attr==‘opacity‘） { cur=parseFloat（getStyle（obj，attr））*100 } else { } 设置样式判断 if（attr==‘opacity‘） { obj.style.filter=‘alpha（