Home > Developer > JavaScript
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.
<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" >
<input type= "button" value= "Stop Moving" >
</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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
