Created
February 15, 2012 15:03
-
-
Save ChrisMoney/104979e648b31b16e9bc to your computer and use it in GitHub Desktop.
Javascript --Animated Advertisement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Animated Advertisement | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>Animated Advertisement</title> | |
| <style type = "text/css"> | |
| #divAdvertisement { | |
| position: absolute; | |
| font: 12px Arial; | |
| top: 4px; | |
| left: 0px; | |
| } | |
| </style> | |
| <script type = 'text/javascript'> | |
| var switchDirection = false; //To keep track of where were going, if false animation is moving from left to right | |
| function doAnimation() { | |
| var advertisement = document.getElementById("advertisement"); //Get the element | |
| var currentLeft = advertisement.offsetLeft; //Get the current left position | |
| var newLocation; //Will store the new location | |
| if (switchDirection == false) { | |
| newLocation = currentLeft + 2; //Move the text 2 pixels to the right | |
| if (currentLeft = 400) {//We've reached our destination | |
| switchDirection = true; //So let's turn around | |
| } | |
| else | |
| var newLocation | |
| { | |
| newLocation = currentLeft = -2; //Move the tecxt 2 pixels to the left | |
| if (currentLeft = 0) ( //We've reached our destination | |
| switchDirection = false; //so let's turn around | |
| } | |
| } | |
| advertisement.style.left = newLocation + "px"; //Change the left position | |
| } | |
| <script> | |
| </head> | |
| <!--setInterval evaluates an expression at specified intervals | |
| <body onload = "setInterval(doAnimation, 10)"> | |
| <div id = "advertisement">Here is an advertisement.</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment