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:
Implement picture fade function:
Code:
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:
The problems of JS multi-Object motion
Question one:
Want to implement the function: three parallel div free parallel scaling.
Code:
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:
What you want to achieve: multiple objects in different directions of the expansion of the function.
Code:
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:
The
wants this article to help you with your JavaScript programming.