Phiên bản đầy đủ: jsB@nk » 3D » Quả bóng bay quanh chuột
URL: https://www.javascriptbank.com/poniter-with-revolving-ball.html
Một quả bóng tự xoay quanh con trỏ chuột trên trang web theo quĩ đạo tròn, tùy từng vị trí trên quĩ đạo mà quả bóng có kích thước to, nhỏ khác nhau. Trông như quả bóng chuyển động 3D. Bạn có thể thay đổi các thông số về quĩ đạo, tốc độ và hình ảnh khác để tạo hiệu ứng mang nét riêng của mình
Phiên bản đầy đủ: jsB@nk » 3D » Quả bóng bay quanh chuột
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>