Version complète: jsB@nk » 3D » Poniter tournant avec boule
URL: https://www.javascriptbank.com/poniter-with-revolving-ball.html
Cet effet rend la balle tourne pointeur sur la page Web avec la trajectoire tour, dépendent de la position de la balle alors qu'il ont une petite ou grande taille. Il ressemble à la 3D. Vous pouvez modifier les valeurs de coordonnées, la trajectoire, la vitesse, ... de faire le plus préféré un.
Version complète: jsB@nk » 3D » Poniter tournant avec boule
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, till@grundrauschen.de 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>