JS advanced motion instance analysis and js instance analysis

JS advanced motion instance analysis and js instance analysis

This article analyzes the JS advanced motion. We will share this with you for your reference. The details are as follows:

I. Chain motion frame

1. He needs a callback function to start the next motion (execute the function) when the motion stops)

The motion frame of multiple objects is changed to the following:

function startMove(obj,attr,iTarget,fn){...  if(iCur==iTarget){    clearInterval(obj.timer);    fn();  }...};

Then you can use it, for example, first increase the width, then increase the transparency, and then change the transparency.

startMove(this,'width',300,function(){  startMove(this,'height',300,function(){    startMove(this,'opacity',100);  });});

Ii. Perfect motion frame

1. Defects of the original multi-object motion frame

For example, to change the width and height to 300 at the same time, write as follows:

startMove(this,'width',300);startMove(this,'height',300);

Problem: only the height is changed to 300 (because a timer will be enabled when the width is ready for motion. Before the timer starts motion, the timer will be shut down when the height change is executed)

2. for in

For (I = 0; I <= arr. length; I ++) and for (I in arr) have the same effect

① When to use for and when to use for... in?

Array: Json can be used for both. Json can only be used for... in (because the Json subscript is irregular and there is no length)

For arrays, The for... in loop is not flexible, because the for loop can start from 1 to any number such as 2, and for... in a loop is all

② For in small applications

function setStyle(obj,attr,value){  obj.style[attr]=value;};setStyle(oDiv,'width','300px');setStyle(oDiv,'height','300px');setStyle(oDiv,'background','green');

====>

function setStyle(obj,json){  var attr='';  for(attr in json){    obj.style[attr]=json[attr];  }};setStyle(oDiv,{width:'300px',height:'300px',background:'green'});

③ Improved multi-object motion frame

Function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {for (var attr in json) {if (attr = 'opacity ') {var iCur = parseInt (parseFloat (getStyle (obj, attr )) * 100);} else {var iCur = parseInt (getStyle (obj, attr);} var iSpeed = (json [attr]-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur = json [attr]) {clearInterval (obj. timer); if (fn) {fn (); // this parameter is executed only when a function is passed. Otherwise, an error occurs.} else {if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px '}}, 30 );};

There is another problem.

if(iCur==json[attr]){  clearInterval(obj.timer);}

The timer stops as long as any value in json reaches the target.

For example, if I change the width to 103 and the height to 300, the height will stop when it reaches 300.

Solution

Function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // define a value first. Assume that all values are in for (var attr in json) {if (attr = 'opacity ') {var iCur = parseInt (parseFloat (getStyle (obj, attr) * 100 );} else {var iCur = parseInt (getStyle (obj, attr);} var iSpeed = (json [attr]-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur! = Json [attr]) {bStop = false; // if not all values are reached, set bStop to false} if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px '} if (bStop) {// All values have arrived, disable the timer clearInterval (obj. timer); if (fn) {fn (); // this parameter is executed only when a function is passed. Otherwise, an error will occur. }}, 30 );};