-
重要查看全部
-
currentStyle 针对IE浏览器。getComputedStyle 针对firefox浏览器
查看全部 -
https://github.com/cbat01/js-Animation-effect
做运动时要做向上与向下取整
speed = speed >0? Math.ceil(speed):Math.floor(speed);
查看全部 -
对于同时进行的运动，停止所有动画的一个判定条件。
查看全部 -
同时运动的关键在于，使用遍历，给dom加上不一样的定时器。
查看全部 -
for in ----------------多用于遍历json对象。
对于复杂，多参数的函数，我们可以考虑把入参的结构改为json
查看全部 -
链式运动的关键在于：每次运动函数执行完成之后返回相应的dom对象。
好吧，现在还有个新的方法，在原有的基础上增加回调函数。（这种方法在遇到多流程的动画的时候，要写回调地狱。尽量使用1,如果一定要使用2请使用promise）
查看全部 -
针对IE设置透明度： obj.style.filter = "alpha(opacity: 100)"
针对火狐/chrome浏览器： obj.style.opacity = 0.2
查看全部 -
抽象，是形成组件的重要思想。让你的函数尽量干净。保持DTY原则。
查看全部 -
对于要使用JS操作CSS的值，注意其他样式是否会导致我们需要操作的CSS属性值的改变。
获取属性兼容性JS代码段：
function attr(obj, attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return obj.getComputedStyle(obj, false)[attr]
}
}
查看全部 -
对于多物体运动，在目前的基础上，可以对多物体的方法进行一个抽离。也就是each（）函数。
其余部分和单物体动画没啥区别。
查看全部 -
对于使用定时器来模拟动画效果的情况下，一定要记得在每次模拟之前清除旧的定时器。
查看全部 -
缓冲运动的关键在于，速度随当前状态与目标状态之间的差值呈线性关系，但是速度并不是线性的，而是一个曲线（类比火车停靠，火车启动）
对于在JS内修改了CSS的数值，一定要对数值进行一个处理（CSS的属性value不支持小数点）。
speed = speed>0?Math.ceil(speed):Math.floor(speed);
查看全部 -
运动框架实现思路
速度（改变值left,right,width,height,opacity）
缓冲运动
多物体运动
任意值变化
链式运动
同时运动
查看全部 -
setInterval（函数，毫秒） 定时器
onmouseover 鼠标移入
onmouseout 鼠标移出
object.style.left 修改left
object.offsetLeft 当前的left
object.style.left=object.offsetLeft+num'px'
clearInterval 清除定时器
记得一开始执行函数的时候应该清空定时器
查看全部
举报