Author Topic: [Code] Hearts Following Your Mouse (Read 1582 times)

Supernovadelta · « **on:** June 16, 2008, 01:50:12 am »

Hearts Following Your Mouse

Hello and welcome to another Java code.In this code,enter it in headers or footers(realy does not matter)Red hearts will start following your mouse,the code is good for fancy sites.
Here is preview:
http://i30.tinypic.com/2u4rf5y.jpg

And here is the code:

Code: [Select]

<!-- this script got from www.javascriptfreecode.com-->
     
<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot1" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot2" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot3" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot4" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot5" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot6" style="position: absolute; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>

<script LANGUAGE="JavaScript">
<!-- hide code

var nDots = 7;

var Xpos = 0;
var Ypos = 0;

  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    if (!isNetscape) {
        // I only know how to read the locations of the 
        // <LI> items in IE
        //skip this for now
        // setInitPositions(dots)
    }
    
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
    
    
    if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 1000);
    }
}



function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {	
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}


function startanimate() {	
    setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = 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;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {	
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;	
        start = 1;
    }
    
    for (i = start ; i < nDots; i++ ) {
        
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        
        // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        
        // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
            (spring.Y + resist.Y)/ MASS + YGRAVITY);
        
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        
        // get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + window.pageYOffset;
            width = window.innerWidth + window.pageXOffset;
        } else {	
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        
        // bounce off 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X;			
        dots[i].obj.top =  dots[i].Y;		
    }
}

// end code hiding -->
</script>

<font face="Tahoma"><a target="_blank" href="http://www.javascriptfreecode.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>

If you get any errors or you dont understand what to do,please comment.

Thank you for your time.

Shimmy Shabby · « **Reply #1 on:** June 16, 2008, 12:36:14 pm »

You may also change the image(s) that are following it. Just Change

Code: [Select]

<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;">
	<img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>

Just replace http://www.javascriptfreecode.com/heart.gif to the URL of the image that you want. You may add even more dots following you cursors just add

Code: [Select]

]<div id="dotX" style="position: absolute; height: 11; width: 11;">
	<img src="IMAGE URL" height=11 width=11>
</div>

Replace the X after dot to the next dot number in the list, so if the previous dot said dot11, you would replace the X with a 12.

Replace IMAGEURL with the image you want following the cursor.

What ever number the dot it, that is where the image is going to be in the line of images following the cursor.

Add this code up where all the other ones are.

Shimmy Shabby · « **Reply #2 on:** June 16, 2008, 07:54:02 pm »

Wich broswers was this tested in? it might not work in the internet browsers. Try test it in as many as you can.

simply sibyl · « **Reply #3 on:** June 16, 2008, 08:02:52 pm »

it works in IE 7.0
does not work in firefox

Shimmy Shabby · « **Reply #4 on:** June 16, 2008, 08:23:19 pm »

Subject / Started by	Replies	Last post
Move Mouse Started by \|-\|Java()\|-\| Java	0 Replies 2845 Views	July 18, 2007, 10:34:23 pm by \|-\|Java()\|-\|
[Stylesheet] Angel Hearts Started by Tash Stylesheet Codes	2 Replies 3083 Views	December 18, 2008, 09:04:16 am by cookie*doll
Pawprints on Our hearts Started by Paws Advertise Your Board	0 Replies 646 Views	August 14, 2008, 03:30:48 pm by Paws
Request for a kingdom hearts Started by Abstract Graphics	0 Replies 663 Views	October 10, 2008, 05:56:33 pm by Abstract
Kingdom Hearts Master! Started by Tanner Advertise Your Board	0 Replies 797 Views	February 15, 2009, 02:20:22 pm by Tanner

SMF For Free Support Forum

News:

Author Topic: [Code] Hearts Following Your Mouse (Read 1582 times)

Supernovadelta

[Code] Hearts Following Your Mouse

Shimmy Shabby

Re: [Code] Hearts Following Your Mouse

Shimmy Shabby

Re: [Code] Hearts Following Your Mouse

simply sibyl

Re: [Code] Hearts Following Your Mouse

Shimmy Shabby

Re: [Code] Hearts Following Your Mouse

Related Topics