In fact, the principle is very simple, mainly using a timer function, below I for everyone
Demo a simple animation production process, through the relevant introduction, we can extrapolate, make more dazzling animation effect.
The effect of this example is to click on the "Start Move" button on the page, then the specified layer will move from left to right, in the process you click the "Stop Moving" button will stop moving.
Copy Code code as follows:
<title>javascript Motion sample</title>
<script language= "JavaScript" >
var movingid = null;
var scrolling = false;
function Startmove ()
{
var left = eval (div1.style.left.replace ("px", ""));
if (left < document.body.scrollwidth-150)
Div1.style.left = left + 1;
Else
Div1.style.left = 10;
Movingid = settimeout ("Startmove ()", 10);
}
function Stopmove ()
{
Cleartimeout (Movingid);
}
</script>
<body>
<div id= "Div1" style= "visibility:visible; Position:absolute; Left:10; Top:10; z-index:1; " >
<table bgcolor= "#FFFFCC" border= "1" cellpadding= "0" cellspacing= "0" >
<tr>
<td>i can moving...</td>
</tr>
</table>
</div>
<br><br>
<input type= "button" value= "Start Moving" onclick= "Startmove ()" >
<input type= "button" value= "Stop Moving" onclick= "Stopmove ()" >
</body>
A function called settimeout (function, interval) is used here, and the parameter format of this function is:
The first parameter "function" is the name of the function called after the timeout, and the second argument "interval" is the time-out value, in microseconds.
Note that if you want to stop this timer, you must save the return value after calling this settimeout () function and cancel the timer by cleartimeout (ID) function.
