JavaScript study note 1 (motion principle)

SetJquery pluginCore animation functions are written in native JS, and there are very few codes. To make it easier for netizens to learn, each function has a very detailed annotation, with a total of 10 demos, note 1 of this JavaScript study includes the following content:

I. Basic Motion framework1. you need to initialize a timer var timer = null; 2. clear the timeline clearInterval (timer); 3. set the animation (30-pin/second) timer = setInterval (function () {}, 30); 4. set the speed (the larger the faster, the smaller the slower) var speed = 10; 5. determine the end position if (current value <target value) {} 6. if the target value is reached, clear the timeline clearInterval (timer); 7. if the target value is not reached, the current value is accelerated. The current value of the target value is + = speed. Ii. Buffering1. gradually slow down, and finally stop 2. the farther the distance is, the higher the speed -- the speed is determined by the distance -- speed = (target value-current value)/Scaling Factor 3. math. ceil () // rounded up Math. floor () // round down Iii. Motion frame Improvement1. improves the timer and binds a timer to multiple event elements as the oList [I] object attribute. timer = null; 2. improved parameters to bind parameters to multiple event elements as the object attribute oList2 [d]. alpha = 30; 3. do not have public parameters when moving multiple objects. 4. elastic movement and collision Movement1. acceleration and deceleration movement if (demo9.offsetLeft <200) {iSpeed + = 1;} else if (demo9.offsetLeft> = 0) {iSpeed-= 1 ;}; 2. the value of height width cannot be negative. Speed + = (target value-demo9.offsetLeft)/5; 3. friction: Speed * = 0.7; 4. collision Motion The 10 demos are as follows:Example-1-Uniform Motion of small squares [Stop condition: Math. abs (div1.offsetLeft-nTarget) <num] Example-2-image fade-in and fade-out [transparency compatible with IE, FF: opacity: 0.3; filter: alpha (opacity: 30)] example-3-the left and right movements of the small square buffer [speed rounded up: iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed)] Example-4-floating layer on the right [parseInt (iTarget)] Example-5-changing the width of multiple divs [bind a timeline oList [I] to each element. timer = null] Example-6-change the transparency of multiple IMG [bind the attribute oList [I] to each element. alpha = null] Example-7-any value motion frame (mixed multi-dimensional animation) Example-8-perfect motion frame Example-10-Collision Motion Demo