«»

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.

Label: poniter, revolving, ball, revolve, trajectory, position, 3D,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

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

Copy All x2

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

Copy All x2

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

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

this.bid eChainBank.com ChainTutor.com ChatTotal.com CTRCoin.com system.money CryptoKD.com choose.exchange choose.works Card.rip CoinHolo.com XMQV.com ABP3.com index.services ApexBTC.com CreditCard.rip ZWVQ.com YeuNu.com war.money pornID.net

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Till Nagel [more]
5,994
0
170
0
7.69 KBytes

JavaScript Poniter with revolving ball

2.5/5 170 votes / 5,994 previews / 0 comment 30/01/2007 This effect makes a ball revolves pointer on the web page with round trajectory, depend on ball's position then it have ...JavaScript Poniter with revolving ball - Poniter with revolving ball

tuanksor soiphieuluu eldershaw ilove

Let's be first member to do this

minhtam10x