JavaScript movement detailed _javascript skills

The motion principle of an object: Moving changes occur by changing the position of the object.

Method:

1. Use absolute positioning for moving objects
2. Move the object by changing the value of the positioned object (left, right, top, bottom). For example, moving right or left can use Offsetleft (offsetright) to control movement around.

Steps:

1, before starting the movement, first clear the timer (because: is a continuous click button, the object will be moving faster, causing movement chaos)
2. Open timer, calculate speed
3, the Movement and stop Separation (IF/ELSE), to determine the cessation of conditions, the implementation of the Movement

A. Timer

In JAVASCRITP, there are two specialized functions for timers, which are:

1. Inverted timer: Timename=settimeout ("function ();", delaytime);
2. Cycle Timer: Timename=setinterval ("function ();", delaytime);

function () is the event of the timer trigger to perform the functions, can be a function, or can be a few functions, or JavaScript can also be a statement, the single to use; Delaytime is the time interval, in milliseconds.

Countdown timer is to trigger the event after a specified time, and the cycle timer is the interval between the arrival of the recurrence of events, the difference is: the former only function once, while the latter is constantly acting.

The countdown timer is typically used on a page that only needs to be triggered once, for example, click on a button after the page in a certain time to jump to the corresponding site, can also be used to determine whether a browser is your site "old guest", if not, you can in 5 seconds or 10 seconds to jump to the corresponding site, And tell him to come back later. You can click a button in a place to quickly enter.

Cycle timers are typically used on sites that need to be performed from a duplicate, such as a JavaScript scroll bar or a status bar, and can be used to represent the background of a page with a blizzard picture. These events take time to run at intervals.

Sometimes we also want to remove some of the added timer, at this time can use Cleartimeout (timename) to close the countdown timer, and with Clearinterval (Timename) to turn off the cycle timer.

Two. Sport Research

1. Movement: Uniform motion (let the object move)

The use of the timer
Add absolute positioning to div
Offsetleft

Problem: Reach a particular location 罝 stop
Resolution: To make a judgment, when the conditions of the switch off timer (save timer)
Speed slows (generally not moving time, but changing numbers-speed)
Save speed with variable

Question: Take 7 o'clock, offsetleft not equal to 300, Div can't stop
Solution: >=300//stop at 301

Question: After 300 click on the button and continue to go
Reason: Click the button, execute function, open timer (execute the current function at least once)
To resolve: add else (performed before the target is not reached)

Problem: Continuous click, faster
Reason: Every click to open a timer, click on a few times there are several timers working at the same time
Solution: Ensure that only one timer work at a time, first cearlnterval ()

Example 1,

<! DOCTYPE html>  

The effect is as follows:

Example 2, Fading:

<!
DOCTYPE html>  

The effect is as follows:

The stopping condition of uniform motion

The distance is close enough

Example 3, the stop condition of uniform motion:

<! DOCTYPE html>  

2. Variable motion (buffer movement)

Slow down, stop at last
The farther away, the greater the speed.
Speed is determined by distance
Speed = (target-current value)/scaling factor
If you do not have the scaling factor T, the speed is too large to reach the finish. No process

Question: Did not really reach 300
Reason: only 0.9//pixel is the most/j location that the screen can display, and will not be rounded off
Math.ceil () rounding up
Math.floor () rounding down

Question: Go left, another piece of--math.floor ()
Judge: three mesh speed=speed>0? Math.ceil (Speed): Math.floor (Speed)

Example, buffering motion:

<! DOCTYPE html>
 
 

The effect is as follows:

3. Multi-Object movement

Multiple div, mouse to move to widen
The motion frame passes the reference obj and knows which object to move.
The buffer must be rounded.

Problem: Div does not move back//Clear Previous Timer
Reason: Only one timer
Solution: Add the timer on the object so that each object has a timer. Timer As object property

Multiple div fade in
First, close the timer on the object.
Experience: Multi-Object Motion framework nothing can be shared.

Question: Not because of the timer, but because Alpha
To attach to an object as a property/not in the form of a variable

Offset bug

Add border widening

Offsetwith is not really the width, it gets the box model size
Resolution: Hide the width into the rows, Parselnt (oDiv.style.width)

Further resolved: GetStyle (obj, name) Currentstyle, getComputedStyle
Add border, as long as the offset is a problem remove offset

example, multi-object motion:

<! DOCTYPE html>  

The effect is as follows:

4. Arbitrary value Movement

The units of any value movement are divided into transparency and px.

Any value in PX unit

<! DOCTYPE html>  

The effect is as follows:

Any value of transparency, you need to make a judgment:

To determine
var cur=0
if (attr== ' opacity ') {
cur=parsefloat (getstyle (obj, attr)) *100
}else{

}
Set Style Award Break
if (attr== ' opacity ') {
obj.style.fiIter = ' alpha (opacity: ' (cur+speed) + ') '
obj.style.opacity= (cur+ Speed)/100
}else{

}

5. Chain Type Movement

One more argument, only when it's passed in.
Move the mouse over the width, and then eject ABC
Expand horizontally.
Mouse out, first change back to opaque, to become shorter, narrow

three. Packaging Motion frame (Source download: https://github.com/jingwhale/jsmove/blob/master/move.js)

Based on the above analysis and summary, the packaging Movement framework Move.js as follows:

function GetStyle (obj, name) {if (Obj.currentstyle) {return obj.currentstyle[name];
  else {return getComputedStyle (obj, false) [name];
  } function Startmove (obj, JSON, fnend) {clearinterval (Obj.timer);    Obj.timer=setinterval (function () {var bstop=true;
      
      Suppose: All values are already in the for (Var attr in json) {var cur=0;
      if (attr== ' opacity ') {Cur=math.round (parsefloat (GetStyle (obj, attr)) *100);
      else {cur=parseint (GetStyle (obj, attr));
      } var speed= (json[attr]-cur)/6; Speed=speed>0?
      
      Math.ceil (Speed): Math.floor (speed);
      
      if (cur!=json[attr]) Bstop=false;
        if (attr== ' opacity ') {obj.style.filter= ' alpha (opacity: ' + (cur+speed) + ') ';
      obj.style.opacity= (cur+speed)/100;
      else {obj.style[attr]=cur+speed+ ' px ';
            
      } if (bstop) {clearinterval (Obj.timer); if (fnend) fnend ();
}, 30); }

The Move.js motion framework basically meets the needs of all animations on the web today (excluding CSS3).

Four. Application Application

1, complete the following effect:

The JS code is as follows:

<script src= "Move.js" ></script>
<script>
window.onload=function ()
{
  var odiv= document.getElementById (' play ');
  var abtn=odiv.getelementsbytagname (' ol ') [0].getelementsbytagname (' Li ');
  var oul=odiv.getelementsbytagname (' ul ') [0];
  
  var now=0;
  for (Var i=0;i<abtn.length;i++)
  {
    abtn[i].index=i;
    Abtn[i].onclick=function ()
    {
      now=this.index;
      tab ();}
    ;
  }
  
  Function tab ()
  {for
    (var i=0;i<abtn.length;i++)
    {
      abtn[i].classname= ';
    }
    Abtn[now].classname= ' active ';
    Startmove (Oul, {top: -150*now});
  }
  
  function Next ()
  {
    now++;
    if (now==abtn.length) {now=0;}
    tab ();
  }
  
  var timer=setinterval (next, Watts);
  
  Odiv.onmouseover=function () {clearinterval (timer);
  
  Odiv.onmouseout=function () {timer=setinterval (next);};
</script>

Apply 2, complete the following effect:

The code is as follows:

<! DOCTYPE html>  

SOURCE Download: Https://github.com/jingwhale/jsmove

The above mentioned is the entire content of this article, I hope you can enjoy.