JavaScript on the various issues of motion classic summary _javascript Tips

The examples in this article summarize the various problems of JavaScript about motion. Share to everyone for your reference. Specifically as follows:

A, JS movement of various problems

Question one:

Error code:

function Startmove () { 
 var timer=null; 
 var Div1=document.getelementbyid ("Div1"); 
 if (div1.offsetleft==300) { 
  clearinterval (timer); 
 } else{ 
  timer=setinterval (function () { 
   div1.style.left=div1.offsetleft+10+ "px"; 
  },30) 
 } 
}

Features you want to implement:

Turn on timer timer, let the div1 move to 300px, and then let Div1 stop and turn off the timer.

The wrong place:

If statement error, the code first sets a null timer timer, and then turns off the timer timer if the left margin of Div1 is 300px. otherwise keep moving. But if is not a circular statement, the IF statement will not execute once after it is executed once. So never turn off the timer.

Correct code:

var timer=null; 
function Startmove () { 
 var Div1=document.getelementbyid ("Div1"); 
 Timer=setinterval (function () { 
  if (div1.offsetleft==300) { 
   clearinterval (timer); 
  } 
  div1.style.left=div1.offsetleft+10+ "px"; 
 },30) 
}

Question two:
Error code:

function Startmove () { 
 var speed=1; 
 var timer=null; 
 var Odiv1=document.getelementbyid ("Div1"); 
 Clearinterval (timer); 
 Timer=setinterval (function () { 
  if (odiv1.offsetleft>=300) { 
   clearinterval (timer); 
  } else{ 
   odiv1.style.left=odiv1.offsetleft+speed+ "px"; 
  } 
 },30) 
}

Features you want to implement:

Continuous click on the Start button, DIV1 will accelerate, this is because every time you click the button, it will open a timer, accumulated will accelerate, so you have to open the timer regardless of whether there is a timer on the first time to turn off the timer. But after adding the Clearinterval method that closes the timer, it still accelerates.
The wrong place:
Put the timer variable in the Startmove method, which is equivalent to every click of a button, will perform a Startmove method, generated a closure, so create a local timer, each closure of the timer does not share, So it's the same as the closure timer that generated the number of clicks.

Correct code:

var timer=null; 
function Startmove () { 
 var speed=1; 
 var Odiv1=document.getelementbyid ("Div1"); 
 Clearinterval (timer); 
 Timer=setinterval (function () { 
  if (odiv1.offsetleft>=300) { 
   clearinterval (timer); 
  } else{ 
   odiv1.style.left=odiv1.offsetleft+speed+ "px"; 
  } 
 },30) 
}

Implement share bar Access function:
Code:

<! DOCTYPE html>  

Implement picture fade function:
Code:

<! DOCTYPE html>  

Note the point:

1. Because JavaScript does not have properties like the left margin (offsetleft) on transparency. So use an alpha variable instead.
2.JavaScript code in the interbank transparency settings need to consider the compatibility of the browser, ie browser set method for Odiv1.style.filter= "Aplha (opacity:" +aplha+) ";
Chrome and Firefox are odiv1.style.opacity=alpha/100.
To implement a scroll bar event:
Code:

<! DOCTYPE html>  

The problems of JS multi-Object motion

Question one:

Want to implement the function: three parallel div free parallel scaling.
Code:

<! DOCTYPE html>  

Precautions:

Multi-Object motion if just set a timer (set global timer), then three Div share a global timer, then when a div does not complete the narrowing action when another Div open timer to perform stretching, because the timer is global, Then the last div timer will be overwritten that is canceled, so the previous timer could not completely shrink the action last night, the solution is to give each div set a property timer.

Question two:

What you want to achieve: multiple images fade in and out.
Code:

<! DOCTYPE html>  

What you want to achieve: multiple objects in different directions of the expansion of the function.

Code:

<! DOCTYPE html>  

Precautions:

The 1.offsetwidth obtains not only the pure width of the object, but also the width of the object and the outer margin. So in obj.style.width=obj.offsetwidth-1+ "px"; in this sentence, the intention is to shrink the picture at a speed of 1px, but if you set the width of the border to 1px instead of 0px, So the value of offsetwidth is actually the width of obj (note: Not Style.width is not the width of the lines) +2, the above sentence into the obj.style.width=obj width+2-1+ "px"; the image has increased. The solution is to use the width of obj instead of offsetwidth. The width is obtained by GetStyle method.
The 2.getStyle method gets a string. Needs to be cast to a numeric type with parseint.

Complete frame of motion:

<! DOCTYPE html>  

The

wants this article to help you with your JavaScript programming.