»
EnglishFrenchVietnamese

Print - Bouncing Image - JavaScriptBank.com

Full version: jsB@nk » Image » Bouncing Image
URL: https://www.javascriptbank.com/bouncing-image.html

Bouncing Image © JavaScriptBank.comRandomly bounces an image, or anything within a DIV, across the page. Click on the image to start and stop it from moving. Cool!

Full version: jsB@nk » Image » Bouncing Image
URL: https://www.javascriptbank.com/bouncing-image.html



JavaScript
<SCRIPT LANGUAGE="JavaScript">// Bouncing Image// Justin Arruda (JArruda@mindspring.com)var step = 1;var delay = 30;var height = 0;var Hoffset = 0;var Woffset = 0;var yon = 0;var xon = 0;var pause = true;var interval;var name = navigator.appName;if(name == "Microsoft Internet Explorer") name = true;else name = false;var xPos = 20;if(name) var yPos = document.body.clientHeight;else var yPos = window.innerHeight;function changePos() {if(name) {width = document.body.clientWidth;height = document.body.clientHeight;Hoffset = img.offsetHeight;Woffset = img.offsetWidth;img.style.left = xPos + document.body.scrollLeft;img.style.top = yPos + document.body.scrollTop;}else {height = window.innerHeight;width = window.innerWidth;Hoffset = document.img.clip.height;Woffset = document.img.clip.width;document.img.pageY = yPos + window.pageYOffset;document.img.pageX = xPos + window.pageXOffset;}if (yon) {yPos = yPos + step;}else {yPos = yPos - step;}if (yPos < 0) {yon = 1;yPos = 0;}if (yPos >= (height - Hoffset)) {yon = 0;yPos = (height - Hoffset);}if (xon) {xPos = xPos + step;}else {xPos = xPos - step;}if (xPos < 0) {xon = 1;xPos = 0;}if (xPos >= (width - Woffset)) {xon = 0;xPos = (width - Woffset);   }}function start() {if(name) img.visibility = "visible";else document.img.visibility = "visible";interval = setInterval('changePos()',delay);}function pauseResume() {if(pause) {clearInterval(interval);pause = false;}else {interval = setInterval('changePos()',delay);pause = true;   }}start();//  End --></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id="img" style="position:absolute;"><img src="Floating_images_script/ballon2.gif" onMouseDown="pauseResume();"></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->