Adam' javascript学习笔记一 ----- 运动原理2012/11/8

Example - 1 - 小方块匀速运动 [ 停止条件 ： Math.abs(div1.offsetLeft - nTarget) < num ]

Example - 2 - 图片淡入淡出[ 透明度兼容IE,FF： opacity:0.3; filter:alpha(opacity:30) ]

 

Example - 3 - 小方块缓冲左右运动 [ 速度取整：iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed) ]

Example - 4 - 右边浮动层 [ parseInt(iTarget) ]

→

→

→

→

　

　

缓冲运动

运动入门总结：

1. 深刻运动框架基本原理。

2. 重要参数：

--- 目标位置 ( target )

--- 当前位置 ( curr )

3. 常用的缓冲运动。

Example - 5 - 多个DIV改变宽度 [ 给每个元素绑定时间轴 oList[i].timer = null ]

• 标题一
• 标题二
• 标题三
• 标题四
• 标题五

Example - 6 - 多个IMG改变透明度 [ 给每个元素绑定属性 oList[i].alpha = null ]

Example - 7 - 任意值运动框架( 混合多维动画 )

• 宽度改变
• 透明度改变
• 变字体大小
• 变边框
• 改变padding
• 改变left
• 改变高度

Example - 8 - 完美运动框架

 

Example - 9 - 弹性运动

 

Example - 10 - 碰撞运动