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 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 - 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
Curseur sql - Conseils pratiques -SQL
Script photoshop - Forum Graphisme/design
Curseur désolé - Forum Delphi / Pascal
Script moodle ✓ - Forum Javascript / DHTML
Tampermonkey script tls - Forum Java

3 réponses

Réponse 1 / 3

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
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 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
26 janv. 2014 à 10:59

en direct de tahiti

Discussions similaires

Execution d'un script toutes les 24h

[clos] script pour prendre des rendez sur mon site

changer le curseur

Besoin d'aide pour faire un script Greasemonkey

Problème curseur personalisé

Votre réponse

Discussions similaires