A case study of the motion function of JS multiple objects _javascript skills

In this paper, we analyze the motion function of several objects by JS. Share to everyone for your reference, specific as follows:

with a single difference: you need to know which is moving, so the motion function requires two parameters, out of the target itarget, but also obj. More than one counter is required, otherwise a jam will occur when one has not finished moving in another object

Window.onload=function () {
  var adiv=document.getelementsbytagname ("div");
  var timer=null;
  var i;
  for (i=0;i<adiv.length;i++) {
    adiv[i].timer=null;
    Adiv[i].onmouseover=function () {
      startmove (this,300);
    };
    Adiv[i].onmouseout=function () {
      startmove (this,100);}
    ;
  } function Startmove (obj,itarget) {
    clearinterval (obj.timer);
    Obj.timer=setinterval (function () {
      var ispeed= (itarget-obj.offsetwidth)/8;
      Ispeed=ispeed>0? Math.ceil (ispeed): Math.floor (ispeed);  To use the buffer movement, must not need to take the whole, in order to allow him to the point of destination (otherwise can not fully fit)
      if (obj.offsetwidth==itarget) {
        clearinterval (obj.timer);
      }
      else{
        obj.style.width=obj.offsetwidth+ispeed+ ' px ';
      }
    },30;
  }
;

Note: Multi-object movement, all things can not be public

properties are bound to motion objects: speed, other property values (such as transparency, etc.)

Offsetwidth, Offsetheight, Offsetleft, offsetheight have a bug, take offsetwidth for example, he besides width also includes padding and border, such as div width of 100, There is also a pixel border, now let the div movement, div.style.width=div.offsetwidth-1+ ' px ', without the border of the case he will always shrink until disappeared, there is a border situation. width:100px,offsetwidth:102px >>>>>width:101px,offsetwidth:103px will make him grow bigger.

Solution:

With Currentstyle Div.style.width=parseint (GetStyle (Div, ' width ')) -1+ ' px ' getstyle is a function of its own encapsulation to get the style, which includes the Currentstyle method. Parseint Parse string returns an integer.

Extension (arbitrary value change):

Use the same set of motion frames to make an object wider, one higher, one by one transparency changes

Window.onload=function () {
  var adiv=document.getelementsbytagname ("div");
  var timer=null;
  Adiv[0].onmouseover=function () {
    startmove (this, ' width ',);
  };
  Adiv[0].onmouseout=function () {
    startmove (this, ' width ', m);
  };
  function GetStyle (obj,attr) {
    if (obj.currentstyle) {return
      obj.currentstyle[attr];
    }
    else{return
      getComputedStyle (obj,false) [attr];
    }
  ;
  function Startmove (obj,attr,itarget) {
    clearinterval (obj.timer);
    Obj.timer=setinterval (function () {
      var icur=parseint (GetStyle (obj,attr));
      var ispeed= (itarget-icur)/8;
      Ispeed=ispeed>0? Math.ceil (ispeed): Math.floor (ispeed);  To use the buffer movement, must not need to take the whole, in order to allow him to the point of destination (otherwise can not fully fit)
      if (icur==itarget) {
        clearinterval (obj.timer);
      }
      else{
        obj.style[attr]=icur+ispeed+ ' px ';
      }
    },30;
  }
;

There is another problem with the framework of the campaign, which is not supported by transparency.

1.

var icur=parseint (GetStyle (obj,attr));

Opacity take the a fraction, parseint take the whole, so opacity is always 0, should be changed to

if (attr== ' opacity ') {
  var icur=parsefloat (GetStyle (obj,attr)) *100;  For other programs without modification, here the unified multiply
}
else{
  var icur=parseint (GetStyle (obj,attr));

2.

obj.style[attr]=icur+ispeed+ ' px ';

As it is now,

adiv.style.opacity=50px;

should read

if (attr== ' opacity ') {
  obj.style.filter= ' alpha (opacity: ' + (icur+ispeed) + ') ';
  Obj.style.opacity= (icur+ispeed)/100;
}
else{
  obj.style[attr]=icur+ispeed+ ' px '
}

3. Inside the computer, are simulated to store decimal, not the actual to store, the simplest example

alert (0.07*100); The output is not 7, but 7.0000 ... 001, more than 7, a lot of numbers (decimals) are problematic

So var icur=parsefloat (GetStyle (obj,attr)) *100, and there's a problem (flashing), and the workaround is to avoid using decimals

var icur=parseint (parsefloat (GetStyle (obj,attr)) *100);

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.