Trail follows mouse JavaScript demo sourch code

Resource for free JavaScripts for cutting and pasting into Web pages. Get free Java Script tutorials, references, code, menus, calendars, popup windows, demo source code with examples for Rainfall JavaScript flying images birds mouse cursor text fire on clicks snow fall

Pay Per Click

Flying Images

Images flying on Web Pages

Rain Fall Effect

Example of Rain Fall

Swirling Cursor

Swirling Cursor around mouse Pointer

Slide Down Menu

Menu Slide Down on Mouse click

Scrolling Vertical Box

Vertical Scrolling Box

Fire on Click

Fire effect on mouse click

Text Follows

Text follows mouse pointer

Message Display

Messages display like & Scrolling Add

Find A Day

Find any day by just inputs dates

Timer

Timer Messages

Bird Follows Mouse

Bird follows mouse points

Mouse Run With Trail

A trail of images run with mouse

Snow Fall at Night effect

Snow fall like effects

Know Your Relation

Know relationship with other

useful scripts for develop & maintain attractive & good looking web pages. Various web pages with examples, demo and free source code for webmasters for better view of their website.

You must use an Internet Explorer Version for better view

This images follows mouse pointer in all side

Click Here for Demo on separate window

Here is the code for trail follows mouse pointer using java script

<body bgcolor="#666666" onload="dynAnimation()" link="#800080" vlink="#FFCC99" topmargin="0"> <div id="trail0" style="position: absolute; visibility: hidden;"> <img border="0" src="http://www.geocities.com/mobinlodhia/images/atom1.gif" width="30" height="25"> </div> <div id="trail1" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail2" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail3" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail4" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail5" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail6" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail7" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail8" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail9" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail10" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail11" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail12" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail13" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <div id="trail14" style="position: absolute; height: 30; width: 30;"> <img border="0" src="images/atom1.gif" width="30" height="25"> </div> <script language="JavaScript"> var trailnogs = 15; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var raw = 51; var column = 11; var LINEUP = 1; var DISPLAY = 9; var STOPACC = 0.10; var trailis = 8; var timing = .010; var sizepixels = 11; var accuracy = 5; var SPEED = 4; var WAIT = 0.10; var STOP = 0.5; var isNetscape = navigator.appName=="Netscape"; var trailfollow = true; var trails = new Array(); init(); function init() { var a = 0; for (a = 0; a < trailnogs; a++) { trails[a] = new trail(a); } if (!isNetscape) { } for (a = 0; a < trailnogs; a++) { trails[a].obj.left = trails[a].X; trails[a].obj.top = trails[a].Y; } if (isNetscape) { trailtanimate(); } else { setTimeout("trailtanimate()",1100); } } function trail(a) { this.X = raw; this.Y = column; this.ax = 0; this.ay = 0; if (isNetscape) { this.obj = eval("document.trail" + a); } else { this.obj = eval("trail" + a + ".style"); } } function trailtanimate() { setInterval("animate()", 5); } function setInitPositions(trails) { var trailtloc = document.all.tags("LI"); var a = 0; for (a = 0; a < trailtloc.length && a < (trailnogs - 1); a++) { trails[a+1].X = trailtloc[a].offsetLeft trailtloc[a].offsetParent.offsetLeft - trailis ; trails[a+1].Y = trailtloc[a].offsetTop + trailtloc[a].offsetParent.offsetTop + 2*trailis ; } trails[0].X = trails[1].X; trails[0].Y = trails[1].Y - sizepixels; } function MoveHandler(e) { raw = e.pageX; column = e.pageY; return true; } function MoveHandlerIE() { raw = window.event.x + document.body.scrollLeft; column = window.event.y + document.body.scrollTop; } if (isNetscape) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = MoveHandler; } else { document.onmousemove = MoveHandlerIE; } function vec(X, Y) { this.X = X; this.Y = Y; } function springForce(a, j, spring) { var ax = (trails[a].X - trails[j].X); var ay = (trails[a].Y - trails[j].Y); var len = Math.sqrt(ax*ax + ay*ay); if (len > sizepixels) { var springF = accuracy * (len - sizepixels); spring.X += (ax / len) * springF; spring.Y += (ay / len) * springF; } } function animate() { var trailt = 0; if (trailfollow) { trails[0].X = raw; trails[0].Y = column; trailt = 1; } for (a = trailt ; a < trailnogs; a++ ) { var spring = new vec(0, 0); if (a > 0) { springForce(a-1, a, spring); } if (a < (trailnogs - 1)) { springForce(a+1, a, spring); } var resist = new vec(-trails[a].ax * SPEED, -trails[a].ay * SPEED); var accel = new vec((spring.X + resist.X)/ LINEUP, (spring.Y + resist.Y)/ LINEUP + DISPLAY); trails[a].ax += (timing * accel.X); trails[a].ay += (timing * accel.Y); if (Math.abs(trails[a].ax) < WAIT && Math.abs(trails[a].ay) < WAIT && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { trails[a].ax = 0; trails[a].ay = 0; } trails[a].X += trails[a].ax; trails[a].Y += trails[a].ay; var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } if (trails[a].Y >= height - trailis - 1) { if (trails[a].ay > 0) { trails[a].ay = STOP * -trails[a].ay; } trails[a].Y = height - trailis - 1; } if (trails[a].X >= width - trailis ) { if (trails[a].ax > 0) { trails[a].ax = STOP * -trails[a].ax; } trails[a].X = width - trailis - 1; } if (trails[a].X < 0) { if (trails[a].ax < 0) { trails[a].ax = STOP * -trails[a].ax; } trails[a].X = 0; } trails[a].obj.left = trails[a].X; trails[a].obj.top = trails[a].Y; } } --> </script>

The main objective of this web page to provide latest and topmost information to interested visitors in good faith without any favor or prejudice. The affiliation / downloadable programs and other ads and Most of the collection on this site have been collected from various free resources & affiliation opportunities on the net. They may be join & used by anybody. You can use them or join affiliated program for your personal web site. However, we are not responsible for any copyright or terms - conditions place on the site by mistake. We can only remove such collection if it comes to our knowledge. Developers & owners of this site are not in any way responsible for quality of the product or services at any of the company. Interested visitors are advised to confirm their queries from related service provider directly.