Cursor Trail Script

**wutu** · 09-29-2008, 09:50 PM

Here is a script based on the "fade away cursor trail" in the Mouse and Cursor section.

IE5+ Opt7+

Code:

<html>
<head>
<style>
body {
cursor:url("cursor.cur");
}
</style>
<SCRIPT language="Javascript1.2">
<!--

//number of cursors behind original cursor (MUST BE LESS THAN 16)
var trailparts = 15

//////////////////NO EDITING BELOW THIS LINE//////////////////

var isNS = (navigator.appName == "Netscape");
doc = (isNS) ? "document" : "document.all";
style = (isNS) ? "" : ".style";

var queue = new Array();

for (x=1; x < 6; x++) {
	eval("trailSpriteFrame" + x + " = new Image();");
	eval("trailSpriteFrame" + x + ".src = 'cursor" + x + ".png';");
}


function trailSpriteObj(anID) {
	this.trailSpriteID = "trailSprite" + anID;
	this.imgRef = "trailSprite" + anID + "img";
	this.currentFrame = 1;
	this.animateTrailSprite = animateTrailSprite;
}

function animateTrailSprite() {
	if (this.currentFrame <6 ) {
		if (isNS) {
			eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		} else {
			eval("document['" + this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		}
		this.currentFrame ++;
	} else {
		eval(doc + '.' + this.trailSpriteID +  style + '.visibility = "hidden"');
	}	
}



function processAnim() {
	for(x=0; x < trailparts; x++)
			queue[x].animateTrailSprite();
}

function processMouse(e) {
	currentObj = shuffleQueue();
	if (isNS) {
		eval("document." + currentObj + ".left = e.pageX;");
		eval("document." + currentObj + ".top = e.pageY;");
	} else {
		eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft;");
		eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop;");
	}
}

function shuffleQueue() {
	lastItemPos = queue.length - 1;
	lastItem = queue[lastItemPos];
	for (i = lastItemPos; i>0; i--) 
		queue[i] = queue[i-1];
	queue[0] = lastItem;
	
	queue[0].currentFrame = 1;
	eval(doc + '.' + queue[0].trailSpriteID +  style + '.visibility = "visible"');	

	return 	queue[0].trailSpriteID;
}

function init() {
	
	for(x=0; x<trailparts; x++)
		queue[x] = new trailSpriteObj(x+1) ;
	
	if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
	document.onmousemove = processMouse;

	setInterval("processAnim();", 20);
}	
if (document.all||document.layers)
window.onload = init;

//-->
</SCRIPT>
</head>
<body>
<div id="trailSprite1" style="position: absolute;z-index: 100">
<img src="blank.gif" border=0 name="trailSprite1img">
</div>
<div id="trailSprite2" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite2img">
</div>
<div id="trailSprite3" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite3img">
</div>
<div id="trailSprite4" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite4img">
</div>
<div id="trailSprite5" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite5img">
</div>
<div id="trailSprite6" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite6img">
</div>
<div id="trailSprite7" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite7img">
</div>
<div id="trailSprite8" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite8img">
</div>
<div id="trailSprite9" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite9img">
</div>
<div id="trailSprite10" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite10img">
</div>
<div id="trailSprite11" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite11img">
</div>
<div id="trailSprite12" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite12img">
</div>
<div id="trailSprite13" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite13img">
</div>
<div id="trailSprite14" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite14img">
</div>
<div id="trailSprite15" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite15img">
</div>
<script language="JavaScript1.2">
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
</script>
</body>
</html>

you also need to download the files attached AND EXTRACT THEM TO THE SAME FOLDER AS THE WEB PAGE

**Master_script_maker** · 09-29-2008, 10:25 PM

this should be posted here. please post it there and redirect users from here to your post.

**wutu** · 09-30-2008, 12:32 AM

thnx i didnt know this. im new to DD

**Master_script_maker** · 09-30-2008, 01:37 AM

no problem

. everyone was new at one point.

**magicyte** · 10-01-2008, 12:48 AM

Cool script you have. I really like it.

There is one problem: when I move the mouse too fast, then suddenly stop, the images pull a funky move and gather up at one spot "like that".

-magicyte

**Master_script_maker** · 10-01-2008, 08:28 PM

ahh the dreaded eval! try this(currently not ie friendly:

Code:

<html>
<head>
<style>
body {
cursor:url("cursor.cur");
}
</style>
<script type="text/javascript">
function id(i) {
return document.getElementById(i);
}
var trail = {
	num: 15,
	tss: new Array,
	x: 0,
	y: 0,
	cur:0,
	prev:0,
	animate: function() {
		this.cur--;
		this.cur=this.cur<0?this.num-1:this.cur;
		id(this.tss[this.cur]).style.left=this.x+"px";
		id('x').innerHTML=this.x;
		id(this.tss[this.cur]).style.top=this.y+"px";
		id('y').innerHTML=this.y;
	},
	mouseCords: function(e) {
	trail.x=(e.pageX?e.pageX:e.clientX?e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft):0);
	trail.y=(e.pageY?e.pageY:e.clientY?e.clientY+(document.documentElement.scrollTop||document.body.scrollTop):0);
	},
	init: function() {
		for (var i=0;i<this.num;i++) {
			this.tss[i]='ts'+(i+1);
		}
		document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove=this.mouseCords;
		this.int=setInterval("trail.animate()", 20);
	},
};
</script>
</head>
<body>
<div id="ts1" style="position: absolute;z-index: 100">
<img src="cursor1.png" border=0 name="st1img">
</div>
<div id="ts2" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="ts2img">
</div>
<div id="ts3" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st3img">
</div>
<div id="ts4" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st4img">
</div>
<div id="ts5" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st5img">
</div>
<div id="ts6" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st6img">
</div>
<div id="ts7" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st7img">
</div>
<div id="ts8" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st8img">
</div>
<div id="ts9" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st9img">
</div>
<div id="ts10" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st10img">
</div>
<div id="ts11" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st11img">
</div>
<div id="ts12" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st12img">
</div>
<div id="ts13" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st13img">
</div>
<div id="ts14" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st14img">
</div>
<div id="ts15" style="position: absolute;z-index: 10">
<img src="cursor1.png" border=0 name="st15img">
</div><br>
<div id="x"></div><div id="y"></div>
<script type="text/javascript">
trail.init();
</script>
</body>
</html>

**jimmy03** · 10-15-2008, 06:37 AM

nice script.........
Thanks man..
Jimmy

Thread: Cursor Trail Script

Thread Tools

Search Thread

Cursor Trail Script

The Following User Says Thank You to Master_script_maker For This Useful Post:

...

Bookmarks

Bookmarks

Posting Permissions