Created
December 11, 2015 17:32
-
-
Save antonioortegajr/2df8f7edf44ee142b108 to your computer and use it in GitHub Desktop.
HTML and js for a moving thingy.
This file contains 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
<html> | |
<head> | |
<style type="text/css"> | |
#boundingBox | |
{ | |
position: absolute; | |
border: 1px #000000 solid; | |
width: 520px; | |
height: 180px; | |
left: 50px; | |
top: 50px; | |
} | |
#myAnimDiv | |
{ | |
background-color: #CC3333; | |
border: 1px #000000 solid; | |
text-align: center; | |
position: absolute; | |
width: 100px; | |
height: 40px; | |
top: 10px; | |
left: 10px; | |
} | |
</style> | |
<script language="javascript"> | |
<!-- | |
var colourArray = ['#CC3333', '#33CC33', '#3333CC', '#CCCC33', '#CC33CC', '#33CCCC'] | |
var currentColour = 0; | |
var xInc = 1; | |
var yInc = 1; | |
var xPos = yPos = 10; | |
var animHandle = null; | |
function stopAnimation() { clearTimeout(animHandle); } | |
function startAnimation() { animHandle = setInterval('doAnimation();', 10); } | |
function doAnimation() | |
{ | |
var animDiv = document.getElementById('myAnimDiv'); | |
xPos += xInc; | |
yPos += yInc; | |
if (xPos > 405) { xInc = -1; currentColour++; } | |
if (xPos < 10) { xInc = 1; currentColour++; } | |
if (yPos > 125) { yInc = -1; currentColour++; } | |
if (yPos < 10) { yInc = 1; currentColour++; } | |
if (currentColour == colourArray.length) currentColour = 0; | |
animDiv.style.left = xPos; | |
animDiv.style.top = yPos; | |
animDiv.style.backgroundColor = colourArray[currentColour]; | |
} | |
//--> | |
</script> | |
</head> | |
<body> | |
<a href="javascript:stopAnimation();">Stop</a> | <a href="javascript:startAnimation();">Start</a> | |
<div id="boundingBox"><div id="myAnimDiv">Hello World!</div></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Originally found here: http://www.tek-tips.com/viewthread.cfm?qid=758315