PDA

View Full Version : 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+


<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 (http://dynamicdrive.com/forums/forumdisplay.php?f=3). 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:
<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 (http://genericviagra4men.blogspot.com/)