JavaScript學習筆記一(運動原理)

把Jquery外掛程式核心動畫功能用原生JS寫出來，而且代碼非常少，為了方便網友們學習，每個功能都把注釋寫得非常詳細，一共帶有10個Demo，此次JavaScript學習筆記一(運動原理)有以下內容：

一、基礎運動架構 1. 需要初始化一個定時器 var timer = null; 2. 清除時間軸 clearInterval(timer); 3. 設定補間動畫（30針/秒） timer = setInterval(function(){},30); 4. 設定速度(越大越快，越小越慢) var speed = 10; 5. 判斷結束位置 if( 當前值 < 目標值 ){} 6. 如果到達目標值，則清除時間軸 clearInterval(timer); 7. 未達到目標值，則 當前值 加 速度目標當前值 += 速度  二、緩衝運動 1. 逐漸層慢,最後停止 2. 距離越遠,速度越大 -- 速度由距離決定 -- 速度 = （目標值 - 當前值）/ 縮放係數 3. Math.ceil() // 向上取整 Math.floor() // 向下取整  三、運動架構改進 1. 改進定時器,給多個事件元素繫結定時器,作為物體屬性 oList[i].timer = null; 2. 改進參數,給多個事件元素繫結參數,作為物體屬性 oList2[d].alpha = 30; 3. 多物體運動不要有公用參數  四、彈性運動 ， 碰撞運動 1. 加減速運動 減速運動if(demo9.offsetLeft < 200){   iSpeed+=1;} else if(demo9.offsetLeft >= 0) {   iSpeed-=1;}; 2. 彈性運動 不適用 height width 不能為負數速度 += ( 目標值 - demo9.offsetLeft )/5; 3. 摩擦力：速度 *= 0.7; 4. 碰撞運動  10個Demo如下： 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) ]Example - 5 - 多個DIV改變寬度 [ 給每個元素繫結時間軸 oList[i].timer = null ]Example - 6 - 多個IMG改變透明度 [ 給每個元素繫結屬性 oList[i].alpha = null ]Example - 7 - 任意值運動架構( 混合多維動畫 )Example - 8 - 完美運動架構Example - 10 - 碰撞運動  示範