Foros del Web » Programando para Internet » Javascript »

Ayuda. Imágenes seguidoras del mouse

Estas en el tema de Ayuda. Imágenes seguidoras del mouse en el foro de Javascript en Foros del Web. HOla gente, felicitaciones por este gran Foro. Tengo un inconveniente con este código ( estrellitas siguiendo al mouse )que he tomado desde una famosa página, ...
  #1 (permalink)  
Antiguo 20/01/2008, 17:58
 
Fecha de Ingreso: enero-2008
Ubicación: Argentina
Mensajes: 215
Antigüedad: 16 años, 3 meses
Puntos: 23
Ayuda. Imágenes seguidoras del mouse

HOla gente, felicitaciones por este gran Foro.
Tengo un inconveniente con este código ( estrellitas siguiendo al mouse )que he tomado desde una famosa página, ya que funciona a la perfección en IE y en Opera, pero no hay manera de hacerlo funcionar en firefox.

Si alguien de ustedes sabe como modificarlo para el Firefox, se los agradeceré
hay que aplicarlo entre las etquetas body


Código:
<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11; left: 12; top: 0"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot7" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>
<div id="dot8" style="position: absolute; height: 11; width: 11;"><img src="http://imagenes.hispavista.com/galeonperseguidor1.gif" height=21 width=19></div>

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

var nDots = 9;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// Time variable
var DELTAT = .01;
// space between images
var SEGLEN = 4;
// Elasticity variable
var SPRINGK = 10;

// physical variable (simulation)
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;

var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;

var BOUNCE = 0.75;

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

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()", 2000);
}
}


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,
(spring.Y + resist.Y)/ MASS + GRAVITY);

// 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 + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else { 
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}

// bounce of 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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:58.