style Code
<style>
*{
margin:0;
padding:0;
}
div{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
}
</style>
Code box
<button id = "btn"> Click to allow box from 0 to move to 400 </ the Button> <the Button the above mentioned id = "btnBack"> Click to allow box from 400 to move to the 0 </ the Button> <div the above mentioned id = "box"> </ div>
script codes
<Script> // 1. Click on the button, so that box moved from 0 to 400 // to btn registration click event, the event handler, so that left the value box slowly into 400 (in the timer, get the current position , on the basis of the current position, plus a few pixels) // 1.1 Get Box element BTN var BTN = document.getElementById ( 'BTN' ); var Box = document.getElementById ( 'Box' ); var btnBack = document.getElementById ( 'btnBack' ); // var TIMEID; // timer for storing the ID // 1.2 btn registered to the click event btn.onclick = function () { Animate (Box, 400,7 ); } // 2. click btnBack, let the box slowly from 400 back to 0 // To btnBack registration click event, the event handler, so that box slowly back to 0 (timer callback function in which to get the current position, minus a few pixels on the basis of the current position) // 2.1 Gets the element btnBack / / 2.2 to btnBack register click event btnBack.onclick = function () { Animate (Box, 0,. 3 ); } // package button event handling code in the function (so that an element, from left to right, or from right to left slow-moving) / * * Function: let an element, from left to right or from right to left to move slowly * element: a required element of the incoming element * target: element moving target position numbers * step: a step (each moving distance element) * * / function Animate (element, target, STEP) { // Clear timer IF (element.timeid) { the clearInterval (element.timeid); } // 1. set the timer = the setInterval element.timeid ( function () { // 2. Get the current position of the element var Current = element.offsetLeft; // 3. The current position of the plus / minus our stepper // if the current position is greater than the target position , is subtracted plus stepping stepper otherwise. IF (Current> target) { // demonstrate from right to left, should subtract STEP var POS = Current - STEP; } the else { // prove to be left Right, should be added STEP var POS = Current + STEP; } // 4. element assigned to a new position element.style.left = + POS 'PX' ; // 5. Analyzing reaches the target position, if the target position and stopped // 5.1 how to determine the target position has been reached // if the current location (the position after the assignment pos) - the absolute value of the difference between the target position, is less than the stepping, proved going up to the target position IF (Math.abs (POS - target) <= the STEP) { // prove soon reach the target position // 5.2 Clear timers, directly to the target location to the element clearInterval (element.timeid) ; element.style.left = target + 'PX' ; } }, 15 ); } </ Script>
Code box
After <button id = "btn"> Click the box to make moving from 0 to 400, to reach 400, automatic return to 0 </ the Button> <div the above mentioned id = "box"> </ div>
script codes
<Script> // 1. Click on the button, so that box moved from 0 to 400 // to btn registration click event, the event handler, so that left the value box slowly into 400 (in the timer, get the current position , on the basis of the current position, plus a few pixels) // 1.1 Get Box element BTN var BTN = document.getElementById ( 'BTN' ); var Box = document.getElementById ( 'Box' ); btn.onclick = function ( ) { Animate (Box, 400,. 7, function () { Animate (Box, 0,. 7 ); }); } // the console.log (. 1); // the setTimeout (function () { // the console.log ( 2); // }, 0); // the console.log (. 3); // package button event handling code in the function (so that an element, from left to right, right to left, or move slowly) / * * function: let an element, from left to right, or slowly moving from right to left * element: a required element of the incoming element * target: element moving target position numbers * step: a step (distance each element moves) * callback: callback function after reaching the target position, will be called * * / function Animate (Element, target, STEP, the callback) { // Clear timer IF (element.timeid) { the clearInterval (element.timeid); } // 1. set the timer element.timeid = the setInterval ( function ( ) { // 2. Get the current position of the element var current = element.offsetLeft; // The current position of the plus / minus our stepping // If the current position is greater than the target position, that is, minus the stepper. Stepper otherwise is to add IF (Current> target) { // proved to be right to left , you should subtract STEP var POS = Current - STEP; } the else { // proved to be from left to right, should be added STEP var POS = Current + STEP; } // 4. element assigned to a new position element.style. pos + = left 'PX' ; // 5. the determining whether the target position, if the target position and stopped // 5.1 how to determine the target position has been reached // if the current location (the position after the assignment pos) - target position difference absolute value, less than the step, immediately proved to be the target position if(The Math.abs (POS - target) <= STEP) { // proved soon reach the target position // 5.2 Clear Timer, directly to the target position of the element to the clearInterval (element.timeid); element.style.left = + target 'PX' ; // determine the user did not pass the fourth parameter, if passed on the call, if the call did not pass // If you pass the function, callback converted to a boolean is true, if nothing pass , callback converted to a boolean, is to false IF (the callback) { the callback (); } } }, 15 ); } </ Script>