HTML and CSS Reference
In-Depth Information
Figure 12.25 An open source Web site that provides excellent examples of slideshows.
12.6 Animation and Timers
On a small but thick pad of paper a boy has drawn a stick man on each page. For each page
he draws his stick man in a sightly different position, maybe moving one leg up and an
arm down. After filling the pad with as many little stick man pictures as he wants to draw,
he goes to his friend and starts rapidly flipping the pages. Voila! He has made a little movie!
Although seemingly primitive, this is the idea behind JavaScript animation. Instead of flip-
ping through a pad of drawings, the stick man drawings can be scanned into your com-
puter as a set of images as shown in Figure 12.26. JavaScript can load the images and then
give them the appearance of animation by using a timer that will be set to put a new image
on the page at short repeating intervals, similar to flipping the pages of the small pad of
paper. With JavaScript, a number of DOM elements ( <img /> , <div> , etc.) can be moved in
the document according to a looping mechanism or an expression tied to a timer.
Two JavaScript functions used as timers are setTimeout() and setInterval() , which
allow JavaScript code to be executed at set intervals. (We have seen the use of both of
these functions throughout this text.)
setTimeout(someFunction,500);
// calls someFunction() 500 milliseconds from now
setInterval(someFunction,500);
// calls someFunction() every 500 milliseconds until stopped
 
 
Search WWH ::




Custom Search