Mon script "curseur élastique" ne marche plus

Résolu

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: 1808
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 5 juillet 2022

- 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
Script python jeux - Guide
Script login php mysql - Conseils pratiques - PHP
Exécuter script sql ligne de commande ✓ - Forum - SQL
Curseur sql - Conseils pratiques - SQL
Script python calculatrice - Guide

3 réponses

Réponse 1 / 3

@karamel

Messages postés: 1808
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 5 juillet 2022

144
Modifié par kazma le 19/01/2014 à 20:21

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 !

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

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

@karamel

Messages postés: 1808
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 5 juillet 2022

144
26 janv. 2014 à 10:59

en direct de tahiti

Votre réponse