Full version: jsB@nk » 3D » Poniter with revolving ball
URL: https://www.javascriptbank.com/poniter-with-revolving-ball.html
This effect makes a ball revolves pointer on the web page with round trajectory, depend on ball's position then it have small or large size. It look like 3D. You can modify values of co-ordinates, trajectory, speed,... to make the most favorite one.
Full version: jsB@nk » 3D » Poniter with revolving ball
URL: https://www.javascriptbank.com/poniter-with-revolving-ball.html
<STYLE type=text/css>#mball {HEIGHT: 48px; LEFT: -100px; POSITION: absolute; TOP: -100px; VISIBILITY: hidden; WIDTH: 64px}.div0{float: left;text-align: center;border: 1px solid black;}.div1{float: left;width: 160px;border: 1px solid black;}.div2{float: left;width: 400px;border: 1px solid black;}.div3{float: left;width: 160px;border: 1px solid black;}</style><SCRIPT language=JavaScript>/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/ // (c)1999 Till Nagel, [email protected] n4 = (document.layers)?1:0; e4 = (document.all)?1:0; // the current item curr = -1; // the images img = new Array(4); function init(e) { if (n4) { document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); document.onMouseMove = mouseMoveHandler; document.onMouseUp = mouseUpHandler; layerStart = "document."; layerStyle = ""; } else if (e4) { document.onmousemove = mouseMoveHandler; document.onclick = mouseUpHandler; layerStart = "document.all."; layerStyle = ".style"; } // preload images if (document.images) { for (i=0; i<4; i++) { img[i] = new Image(); img[i+4] = new Image(); img[i].src = "images/i" + i + "1.jpg"; img[i+4].src = "images/i" + i + "2.jpg"; } } eval(layerStart+"mball"+layerStyle+".visibility = '"+((n4)?"show":"visible")+"'"); //itemAni(-100); } function itemAni(i) { if (i<=100) { eval(layerStart+"item0"+layerStyle+".left=i"); j=i*2; eval(layerStart+"item1"+layerStyle+".left=j"); j=i*3; eval(layerStart+"item2"+layerStyle+".left=j"); j=i*4; eval(layerStart+"item3"+layerStyle+".left=j"); setTimeout("itemAni("+(i+5)+")", 5); } } // the layer functions function getLeft(layer) { if (n4) return(layer.left); if (e4) { return(layer.offsetLeft); } return(-1); } function getTop(layer) { if (n4) return(layer.top); if (e4) return(layer.offsetTop); return(-1); } function getWidth(layer) { if (n4) { return (layer.document.width)?(layer.document.width):(layer.clip.right-layer.clip.left); } if (e4) { return (layer.style.pixelWidth)?(layer.style.pixelWidth):(layer.clientWidth); } return(-1); } function getHeight(layer) { if (n4) { return (layer.document.height)?(layer.document.height):(layer.clip.bottom-layer.clip.top); } if (e4) { return (false && layer.style.pixelHeight)?(layer.style.pixelHeight):(layer.clientHeight); } return(-1); } /* Checks, if the mouse is over a layer. Returns the number of it. Because the layers don't get onMouseOver and onMouseOut in Netscape, every mouse-position is checked. */ function checkLayer(x, y) { var result = -1; var testLayer; for (i = 0; i<4; i++) { if (n4) { eval("testLayer = document.item"+i) } else { eval("testLayer = document.all.item"+i) } if ( (x > getLeft(testLayer)) && (x < (getWidth(testLayer) + getLeft(testLayer)) ) && (y > getTop(testLayer)) && (y < (getHeight(testLayer) + getTop(testLayer))) ) { result = i; } } return result; } function mouseMoveHandler(e) { if (n4 || e4) { mouseX = (n4) ? e.pageX : event.x; mouseY = (n4) ? e.pageY : event.y; //window.status = "X: " + mouseX + ", Y: " + mouseY; /* Sets the position of the moving ball to the current mouse position */ eval(layerStart+"mball"+layerStyle+".left = mouseX - 30"); eval(layerStart+"mball"+layerStyle+".top = mouseY - 25"); // Checks, which is the current layer n = checkLayer(mouseX, mouseY); // Sets the checked item-image to grey setItem(n); // Sets the status to the current message var message=""; switch (n) { case 0: message="about me..."; break; case 1: message="my portfolio..."; break; case 2: message="my study..."; break; case 3: message="how to contact me..."; break; } window.status = message; } return true; } function mouseUpHandler(e) { if (n4 || e4) { mouseX = (n4) ? e.pageX : event.x; mouseY = (n4) ? e.pageY : event.y; clickItem( checkLayer(mouseX, mouseY) ); } return true; } function clickItem(n) { var url=""; switch (n) { case 0: url="about.html"; break; case 1: url="portfolio.html"; break; case 2: url="study.html"; break; case 3: url="contact.html"; break; } if (url!="") location.href = url; //if (url!="") alert(url); return true; } /* Sets the n layer to checked. All others to unchecked. */ function setItem(n) { var a; if (n4) { for (i = 0; i<4; i++) { //a = (n==i)?1:0; // normal // a = (curr==i || n==i)?1:0; // 2 images a = (curr==i)?2:((n==i)?1:0); // 3 images eval("document.item" + i + ".document.img" + i + ".src = 'images/i"+i+a+".jpg'"); } } else if (e4) { for (i = 0; i<4; i++) { //a = (n==i)?1:0; // normal // a = (curr==i || n==i)?1:0; // 2 images a = (curr==i)?2:((n==i)?1:0); // 3 images eval("document.img" + i + ".src = 'images/i"+i+a+".jpg'"); } } }</SCRIPT><DIV id=mball><IMG alt="" border=0 height=48 src="ballani.gif" width=64></DIV>