Images Circle Mouse

[Total: 0    Average: 0/5]

This shows how to have a mouse movement cause images to follow it.

Body Code:

<div id=smile1 style="position:absolute;top:0;left:0"><a href="http://www.js-examples.com/"><img width=50 height=50 border=0 src="http://www.js-examples.com/js/pic1.gif"></a></div>
<div id=smile2 style="position:absolute;top:0;left:0"><a href="http://www.js-examples.com/"><img width=50 height=50 border=0 src="http://www.js-examples.com/js/pic1.gif"></a></div>
<div id=smile3 style="position:absolute;top:0;left:0"><a href="http://www.js-examples.com/"><img width=50 height=50 border=0 src="http://www.js-examples.com/js/pic1.gif"></a></div>
<div id=smile4 style="position:absolute;top:0;left:0"><a href="http://www.js-examples.com/"><img width=50 height=50 border=0 src="http://www.js-examples.com/js/pic1.gif"></a></div>

<script>
var isNS = document.layers?true:false;
var isIE = document.all?true:false;
var X=0;
var Y=1;

var windowBuffer=50;
var yMAX=(isNS?innerHeight:300) - windowBuffer;
var xMAX=(isNS?innerWidth:300)  - windowBuffer;
var yMIN=windowBuffer;
var xMIN=windowBuffer;

var smiles = new Array();
    smiles[0] = isNS?document.layers.smile1:document.all.smile1.style;
    smiles[1] = isNS?document.layers.smile2:document.all.smile2.style;
    smiles[2] = isNS?document.layers.smile3:document.all.smile3.style;
    smiles[3] = isNS?document.layers.smile4:document.all.smile4.style;

var targetX = parseInt(Math.random()*xMAX) + xMIN;
var targetY = parseInt(Math.random()*yMAX) + yMIN;

var smileWidth=50;
var smileHeight=50;

var circleRadius = 50;

var smileRunning = false;
var mT= null;
var mD=40;
var xMoveDistance=1;
var yMoveDistance=1;
var theta=0;
var degreesSeparated = Math.round(360 / smiles.length);

function moveIt() {
  var tX,tY;
  for(i in smiles) {
    var deltaX = Math.round(Math.cos((theta+i*degreesSeparated)*2*3.1415926/360)*circleRadius);
	var deltaY = Math.round(Math.sin((theta+i*degreesSeparated)*2*3.1415926/360)*circleRadius);
	tX = targetX + deltaX;
	tY = targetY + deltaY;
	if (isNS) {
	  if (parseInt(smiles[i].x) < tX) smiles[i].x+=xMoveDistance;
	  if (parseInt(smiles[i].x) > tX) smiles[i].x-=xMoveDistance;
	  if (parseInt(smiles[i].y) < tY) smiles[i].y+=yMoveDistance;
	  if (parseInt(smiles[i].y) > tY) smiles[i].y-=yMoveDistance;
	}
	if (isIE) {
	  if (parseInt(smiles[i].posLeft) < tX) smiles[i].posLeft+=xMoveDistance;
	  if (parseInt(smiles[i].posLeft) > tX) smiles[i].posLeft-=xMoveDistance;
	  if (parseInt(smiles[i].posTop) < tY)  smiles[i].posTop+=yMoveDistance;
	  if (parseInt(smiles[i].posTop) > tY)  smiles[i].posTop-=yMoveDistance;
	}
	theta = ++theta % 360;
  }
  if (mT == null) {
    smileRunning = true;
	mT = setInterval('moveIt()',mD);
  }
}
moveIt();

if (isNS) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=getMousePosition;

function getMousePosition(e) {
  targetX = (isNS?e.pageX:event.x) - Math.round(circleRadius / 2 / 2);
  targetY = (isNS?e.pageY:event.y) - Math.round(circleRadius / 2 / 2);
  if (!smileRunning) {moveIt();}
}
</script>

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *