Dropping ball

Written by @kerixa 24 February 2014

For when we want to have a beautiful code of a falling ball, the following code is useful. In the code below there is a blue ball at the top of the page and by clicking on the page, this ball falls from the same point down and the sense of gravity reminds the earth. This code has been written using JavaScript and you can change it to what you like.

Code Snippet:

                                                
                                                <!-- this script is provided by 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2