Html Code: Dropping ball

An interesting code written by html and javascript. By clicking on the page, a ball drops down and bounces.
You can customize code to change the speed of bouncing and other features.

<!-- this script got from www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
</head>
<body>
<div align="center" id="staticBall" style="position:relative;visibility:visible">
<img src="http://www.htmlbestcodes.com/images/ball.gif" height=30 width=30 alt="Static ball">
</div>
</center>
<div id="ball" style="visibility:hidden; position:absolute; left:100; top:10; height:34; width:34">
<img src="http://www.htmlbestcodes.com/images/ball.gif" height=30 width=30 alt="Bouncing ball">
</div>
<script language="Javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
var ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4));
ie=!ns;
bouncingBall =  document.getElementById("ball").style;
stillBall = document.getElementById("staticBall").style;
var winH ;//= (ns) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (ns)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
winH = (ns) ? window.innerHeight - 55 +window.scrollY: document.body.offsetHeight - 55 +document.body.scrollTop;
if ( ((ns) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (ns) ? e.pageX - 15 : event.clientX - 15;
bouncingBall.top = (ns) ? e.pageY - 15 : event.clientY - 15+document.body.scrollTop;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
   }
}
// End -->
</script>
<br/><div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Dropping ball

Links