JS Advanced Motion Example Analysis _javascript skill

This article analyzes the JS advanced movement. Share to everyone for your reference, specific as follows:

Chain-Type motion frame

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

The multi-object movement framework was replaced by the following:

function Startmove (OBJ,ATTR,ITARGET,FN) {
...
  if (icur==itarget) {
    clearinterval (obj.timer);
    fn ();
  } ...
};

And then you can use it, like widening and then getting high and finally becoming transparent.

Startmove (this, ' width ', 300,function () {
  startmove (this, ' height ', 300,function () {Startmove ()} (this,
    ' Opacity ', m);
  };

Ii. Perfect frame of motion

1. Defects in the original multi-object motion framework

For example, to make him a width of 300 at the same time, so write:

Startmove (this, ' width ', +);
Startmove (this, ' height ', 300);

Problem: Only the height has changed to 300 (because the width is ready to move a timer will open, this timer has not started before the movement, to perform a highly variable movement, the previous timer turned off)

2.for in

for (i=0;i<=arr.length;i++) and for (I-arr) effects

When does ① use for for...in?

Array: Two can be used with JSON: only for...in (because the Json subscript has no regularity, no length to say)

For...in loops are not flexible in the case of arrays, because the for loop can start with 1 from 2, and so on, and the for...in 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 '});

Improvement of motion frame of ③ multi-object

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 ();  There is a pass function This parameter only executes, otherwise will be error
        }
      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's another problem.

if (Icur==json[attr]) {
  clearinterval (obj.timer);
}

As long as any of the values in JSON reach the target, the timer stops.

For example, I'm going to change the width to 103, the height to 300, and the altitude will stop at 300.

Solution

 function Startmove (OBJ,JSON,FN) {clearinterval (Obj.timer);  Obj.timer=setinterval (function () {var bstop=true; First define a value, assuming all values are in the for (Var attr in JSON) {if (attr== ' opacity ') {var icur=parseint parsefloat (GetStyle
      TTR)) *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; Not all values are here, 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 are in, turn off timer clearinterval (
      Obj.timer);  if (FN) {fn ();
There is a pass function This parameter only executes, otherwise will be error}},30);

}; 

For more information on JavaScript-related content readers can view the site topics: "JavaScript movement effect and Skills summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.