Mon script "curseur élastique" ne marche plus [Résolu]

Question

Sujet Précédent Sujet Suivant

Mon script "curseur élastique" ne marche plus [Résolu]

Signaler

tahiticoco

Messages postés: 7
Date d'inscription: mardi 28 septembre 2004
Statut: Membre
Dernière intervention: 20 janvier 2014

- Modifié par kazma le 18/01/2014 à 18:20
@karamel

Messages postés: 1787
Date d'inscription: vendredi 9 mai 2008
Statut: Non membre
Dernière intervention: 9 juin 2021

- 26 janv. 2014 à 10:59

Bonjour,

le script "curseur élastique" ne marche plus avec les navigateurs chrome, firefox et maxthon3 (que j'utilise tous les jours). je travaille sur dreamweaver4 et xp pro sp3

je ne sais pas pourquoi cela ne marche plus. je demande de l'aide pour refaire ce script actualisé pour les 3 navigateurs

merci beaucoup
cordialement

voici le scrip initial :

<DIV id=dot0 style="HEIGHT: 2px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif"></DIV>
<DIV id=dot1 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif" width="27" height="24"></DIV>
<DIV id=dot2 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif" width="27" height="24"></DIV>
<DIV id=dot3 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif" width="27" height="24"></DIV>
<DIV id=dot4 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif" width="27" height="24"></DIV>
<DIV id=dot5 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><IMG border=0 src="images/oeuf1.gif" width="27" height="24"></DIV>
<DIV id=dot6 style="HEIGHT: 2px; POSITION: absolute; WIDTH: 2px"><img src="images/oeuf1.gif" width="50" height="41"></DIV>
<SCRIPT language=JavaScript>


var nDots = 7;
var Xpos = 100;
var Ypos =100;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 100;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 50;
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) {
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
startanimate();
} else {
setTimeout("startanimate()", 3000);
   }
}
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);
}
function setInitPositions(dots) {
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;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
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;
}
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() {
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);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
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;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
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 (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;
}
dots[i].obj.left = dots[i].X;
dots[i].obj.top =  dots[i].Y;
   }
}
</script>

TAHITI lagoon

A voir également:

Mon script "curseur élastique" ne marche plus
Exécuter script sql ligne de commande ✓ - Forum - SQL
Script python jeux - Guide
Curseur sql - Conseils pratiques - SQL
Script php galerie photo dynamique - Guide
Script connexion php - Conseils pratiques - PHP

3 réponses

Répondre Posez votre question

@karamel · Answer 1 · 2014-01-18T19:39:09+0100

bonjour

je rentrerait pas trop dans les détailles car j'ai du faire beaucoup de modif en gros la sa marche.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>

var nDots = 7;
var Xpos = 100;
var Ypos =100;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 100;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 50;
var BOUNCE = 0.75;
var followmouse = true;
var dots = [];
var tb_el = [];

function dot(i) {

 this.X = Xpos;
 this.Y = Ypos;
 this.dx = 0;
 this.dy = 0; 
}

function elasinit() {

 for (var i = 0; i < nDots; i++) {
  var el=document.createElement('div');
  el.style.height=2+'px';
  el.style.width=2+'px';
  el.style.position= 'absolute';
 
  if (i == 0){
   el.style.visibility='hidden';
  }
  
  var gema= document.createElement('img');
  gema.src="images/oeuf1.gif";
  
  if (i < nDots-1){
   gema.height=24;
   gema.width=27;
  }
  else{
   gema.height=41;
   gema.width=50;
  }
  
  el.appendChild(gema);
  var done =  document.body.appendChild(el);
  tb_el.push(done);
  dots[i] = new dot(i);
 }
 setInterval(animate, 20);

}

function MoveHandlerIE(event) {

 var sy=document.body.scrollTop || document.documentElement.scrollTop;
 var sx=document.body.scrollLeft || document.documentElement.scrollLeft;
 Xpos = event.clientX + sx;
 Ypos = event.clientY + sy;
}

typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",MoveHandlerIE) : addEventListener("mousemove",MoveHandlerIE, false);


function vec(X, Y)
{
 this.X = X;
 this.Y = Y;
}

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() {

 var start = 0;
 if (followmouse) {
  dots[0].X = Xpos;
  dots[0].Y = Ypos;
  start = 1;
 }
 for (var 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);
  }
  var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
  var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
  dots[i].dx += (DELTAT * accel.X);
  dots[i].dy += (DELTAT * accel.Y);
  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;
  }
  dots[i].X += dots[i].dx;
  dots[i].Y += dots[i].dy;
  var height, width;

  var sx=document.body.scrollTop || document.documentElement.scrollTop;
  var sy=document.body.scrollLeft || document.documentElement.scrollLeft;

  height = document.body.clientHeight + sx;
  width = document.body.clientWidth + sy;

  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;
  }
  tb_el[i].style.left = dots[i].X+'px';
  tb_el[i].style.top =  dots[i].Y+'px';
 }
}

typeof window.addEventListener == 'undefined' ? attachEvent("onload",elasinit) : addEventListener("load",elasinit, false);

</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

et c'est reparti pour dix ans au moins

cours Forest cours !

tahiticoco · Answer 2 · 2014-01-20T07:45:39+0100

Réponse 2 / 3

tahiticoco

Messages postés: 7
Date d'inscription: mardi 28 septembre 2004
Statut: Membre
Dernière intervention: 20 janvier 2014

20 janv. 2014 à 07:45

bonjour,

je te remercie pour le code, je vais le mettre sur mon site et je vais voir si c'est bon, je te dirais cela
merci encore de ton aide
cordialement

tahiticoco · Answer 3 · 2014-01-26T03:12:39+0100

Réponse 3 / 3

tahiticoco
26 janv. 2014 à 03:12

bonjour,

merci le script marche "nickel" je l'ai mis juste pour faire un test, voici mon site : www.paea-musculation.org.pf

le curseur élastique n'est pas en permanence sur le site
très cordialement

Signaler

@karamel

Messages postés: 1787
Date d'inscription: vendredi 9 mai 2008
Statut: Non membre
Dernière intervention: 9 juin 2021

131
26 janv. 2014 à 10:59

en direct de tahiti

Votre réponse