»
EnglishFrenchVietnamese

Print - Crazy Jumping Wall-Ball - JavaScriptBank.com

Full version: jsB@nk » Image » Crazy Jumping Wall-Ball
URL: http://www.javascriptbank.com/crazy-jumping-wall-ball.html

Crazy Jumping Wall-Ball © JavaScriptBank.comNobody wants to play pong with our poor little ball. So the ball plays pong with the borders of your page. Eyecatching demonstration how to unleash the power of DHTML-animations without wasting loading time and bandwidth

Full version: jsB@nk » Image » Crazy Jumping Wall-Ball
URL: http://www.javascriptbank.com/crazy-jumping-wall-ball.html



JavaScript
<SCRIPT><!-- Beginning of JavaScript -var x,yvar marginbottomvar marginleft=0var margintop=0var marginright// less is fastervar tempo=10// horizontal move (pixels) within time unitvar stepx=20// vertical move (pixels) within time unitvar stepy=20var timer// preloading of the four ballsimg0 = new Image();img0.src = "ld.gif";img1 = new Image();img1.src = "lu.gif";img2 = new Image();img2.src = "rd.gif";img3 = new Image();img3.src = "ru.gif";// wait 2 seconds after loading (to ensure that images are really loadedfunction setValues() {    var firsttimer= setTimeout("setValues2()",2000)}// check the width and the height of the document// gets the starting position of the ball by randomfunction setValues2() {if (document.all) {    marginbottom = document.body.clientHeight-50    marginright = document.body.clientWidth-50document.all.ball.style.posLeft=randommaker(marginright-30)+30   document.all.ball.style.posTop=10    moveball()}if (document.layers) {    marginbottom = window.innerHeight-10    marginright = window.innerWidth-10document.ball.left=randommaker(marginright-30)+30   document.ball.top=10    moveball()}}// randomfunctionfunction randommaker(range) {rand=Math.floor(range*Math.random())    return rand}function moveball() {checkposition()chooseimage()if (document.all) {   document.all.ball.style.posLeft+=stepx   document.all.ball.style.posTop+=stepy    timer=setTimeout("moveball()",tempo)}if (document.layers) {   document.ball.left+=stepx   document.ball.top+=stepy    timer=setTimeout("moveball()",tempo)}}function checkposition() {if (document.all) {if (document.all.ball.style.posLeft>=marginright) {stepx=stepx*-1document.all.ball.style.posLeft-=10}if (document.all.ball.style.posLeft<=marginleft) {stepx=stepx*-1document.all.ball.style.posLeft+=10}if (document.all.ball.style.posTop>=marginbottom) {stepy=stepy*-1document.all.ball.style.posTop-=10}if (document.all.ball.style.posTop<=margintop) {stepy=stepy*-1document.all.ball.style.posTop+=10}}if (document.layers) {if (document.ball.left>=marginright) {stepx=stepx*-1document.ball.left-=10}if (document.ball.left<=marginleft) {stepx=stepx*-1document.ball.left+=10}if (document.ball.top>=marginbottom) {stepy=stepy*-1document.ball.top-=10}if (document.ball.top<=margintop) {stepy=stepy*-1document.ball.top+=10}}}function chooseimage() {if (document.all) {if (stepx <= 0 && stepy <=0) {ballimage.src="rd.gif"}if (stepx >= 0 && stepy <=0) {ballimage.src="rd.gif"}if (stepx <= 0 && stepy >=0) {ballimage.src="rd.gif"}if (stepx >= 0 && stepy >=0) {ballimage.src="rd.gif"}}if (document.layers) {if (stepx <= 0 && stepy <=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx >= 0 && stepy <=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx <= 0 && stepy >=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx >= 0 && stepy >=0) {document.ball.document.ballimage.src="rd.gif"}}}// - End of JavaScript - --></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY id=thisbody onload=setValues()><DIV id=ball style="POSITION: absolute; TOP: -50px"><IMG border=0 name=ballimage src="rd.gif" width="45" height="45"></DIV></BODY><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/image/rd.gif