Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> graphic animation </title>
<Style type = "text/css">
. De {font-size: 30px; text-decoration: none; font-family:; color: # ccc ;}
. De: hover {color: #933 ;}
</Style>
<Script type = "text/javascript">
/**
* ImageLoop. js: An ImageLoop class for faster Ming image animations
*
* Constructor Arguments:
* ImageId: the id of the tag which will be animated
* Fps: the number of frames to display per second
* FrameURLs: an array of URLs, one for each frame of the animation
*
* Public Methods:
* Start (): start the animation (but wait for all frames to load first)
* Stop (): stop the animation
*
* Public Properties:
* Loaded: true if all frames of the animation have loaded,
* False otherwise
*/
Function ImageLoop (imageId, fps, frameURLs ){
// Remember the image id. Don't look it up yet since this constructor
// May be called before the document is loaded.
This. imageId = imageId;
// Compute the time to wait between frames of the animation
This. frameInterval = 1000/fps;
// An array for holding Image objects for each frame
This. frames = new Array (frameURLs. length );
This. image = null; // The element, looked up by id
This. loaded = false; // Whether all frames have loaded
This. loadedFrames = 0; // How many frames have loaded
This. startOnLoad = false; // Start animating when done loading?
This. frameNumber =-1; // What frame is currently displayed
This. timer = null; // The return value of setInterval ()
// Initialize the frames [] array and preload the images
For (var I = 0; I <frameURLs. length; I ++ ){
This. frames [I] = new Image (); // Create Image object
// Register an event handler so we know when the frame is loaded
This. frames [I]. onload = countLoadedFrames; // defined later
This. frames [I]. src = frameURLs [I]; // Preload the frame's image
}
// This nested function is an event handler that counts how many
// Frames have finished loading. When all are loaded, it sets a flag,
// And starts the animation if it has been requested to do so.
Var loop = this;
Function countLoadedFrames (){
Loop. loadedFrames ++;
If (loop. loadedFrames = loop. frames. length ){
Loop. loaded = true;
If (loop. startOnLoad) loop. start ();
}
}
// Here we define a function that displays the next frame of
// Animation. This function can't be an ordinary instance method because
// SetInterval () can only invoke functions, not methods. So we make
// It a closure that includes des a reference to the ImageLoop object
This. _ displayNextFrame = function (){
// First, increment the frame number. The modulo operator (%) means
// That we loop from the last to the first frame
Loop. frameNumber = (loop. frameNumber + 1) % loop. frames. length;
// Update the src property of the image to the URL of the new frame
Loop. image. src = loop. frames [loop. frameNumber]. src;
};
}
/**
* This method starts an ImageLoop animation. If the frame images have not
* Finished loading, it instead sets a flag so that the animation will
* Automatically be started when loading completes
*/
ImageLoop. prototype. start = function (){
If (this. timer! = Null) return; // Already started
// If loading is not complete, set a flag to start when it is
If (! This. loaded) this. startOnLoad = true;
Else {
// If we haven't looked up the image by id yet, do so now
If (! This. image) this. image = document. getElementById (this. imageId );
// Display the first frame immediately
This. _ displayNextFrame ();
// And set a timer to display subsequent frames
This. timer = setInterval (this. _ displayNextFrame, this. frameInterval );
}
};
/** Stop an ImageLoop animation */
ImageLoop. prototype. stop = function (){
If (this. timer) clearInterval (this. timer );
This. timer = null;
};
</Script>
<Script type = "text/javascript">
Function de (){
Var animation = new ImageLoop ("loop", 1, ["img/img_01.jpg", "img/img_02.jpg",]);
Var sta = document. getElementById ("sta ");
Var stp = document. getElementById ("stp ");
Sta. onclick = function (){
Animation. start ();
}
Stp. onclick = function (){
Animation. stop ();
}
}
Window. onload = function (){
De ();
}
</Script>
</Head>
<Body>
<A href = "#" class = "de" id = "sta"> Start </a>
<A href = "#" class = "de" id = "stp"> Stop </a>
</Body>
</Html>
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
