Create text move animation with timer in JavaScript

Description

The following code shows how to create text move animation with timer.

Example


<html>
<head>
<style>
div { position:relative;
}<!--from   w  w  w. j  ava2  s .co m-->
</style>
<SCRIPT LANGUAGE="JavaScript" type = "text/javascript">
var pos1 = 0;

function f() {
pos1 += 5;
if (pos1 > 640)
pos1 = 0;
document.getElementById("movetext").style.left = pos1;
window.setTimeout("f();",300);
}
</SCRIPT>
</head>
<body onLoad="f();">
<div id="movetext">
<b>java2s.com</b>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Create text move animation with timer in JavaScript
Home »
  Javascript Tutorial »
    Event »
      Timer Event
Javascript Tutorial Timer Event
Clear the timer in JavaScript
Create a time out timer in JavaScript
Create text move animation with timer in Ja...
Fire Timer event in JavaScript
Set the timeout for the timer according to ...
Start a timer and cancel a timer in JavaScr...
Stop a time out timer in JavaScript
Use timer in JavaScript
Use window.clearInterval() to stop a timer ...
Use window.clearTimeout() to stop timer in ...