»
EnglishFrenchVietnamese

Print - Poniter with revolving ball - JavaScriptBank.com

Full version: jsB@nk » 3D » Poniter with revolving ball
URL: http://www.javascriptbank.com/poniter-with-revolving-ball.html

Poniter with revolving ball © JavaScriptBank.comThis 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: http://www.javascriptbank.com/poniter-with-revolving-ball.html



CSS
<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>


JavaScript
<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>


HTML
<DIV id=mball><IMG alt="" border=0 height=48 src="ballani.gif" width=64></DIV>