begin process at 2012 05 28 13:44:39
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > EFFET GUIRLANDE (IMAGE QUI SUIT LA SOURIS,

EFFET GUIRLANDE (IMAGE QUI SUIT LA SOURIS,


 Information sur la source

Note :
7,67 / 10 - par 3 personnes
7,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :25/10/2002 Date de mise à jour :25/10/2002 19:36:37 Vu :18 458

Auteur : fabiin

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description


Source

  • Entre <HEAD> et </HEAD>
  • <script language="JavaScript">
  • // Nombre d'images dans la guirlande
  • var nDots = 7;
  • // Position horizontale de départ de la guirlande
  • var Xpos = 137;
  • // Position verticale de départ de la guirlande
  • var Ypos = 39;
  • var DELTAT = .01;
  • var SEGLEN = 10;
  • var SPRINGK = 10;
  • var MASS = 0.8;
  • var GRAVITY = 50;
  • var RESISTANCE = 10;
  • var STOPVEL = 0.1;
  • var STOPACC = 0.1;
  • var DOTSIZE = 10;
  • var BOUNCE = 0.75;
  • var isNetscape = navigator.appName=="Netscape";
  • var followmouse = true;
  • var elements = new Array();
  • // fonction principale d'affichage de la guirlande
  • function init() {
  • var i = 0;
  • for (i = 0; i < nDots; i++) {
  • elements[i] = new element(i);
  • }
  • if (!isNetscape) {
  • }
  • for (i = 0; i < nDots; i++) {
  • elements[i].obj.left = elements[i].X;
  • elements[i].obj.top = elements[i].Y;
  • }
  • if (isNetscape) {
  • startanimate();
  • } else {
  • setTimeout("startanimate()", 1000);
  • }
  • }
  • function element(i) {
  • this.X = Xpos;
  • this.Y = Ypos;
  • this.dx = 0;
  • this.dy = 0;
  • if (isNetscape) {
  • this.obj = eval("document.element" + i);
  • } else {
  • this.obj = eval("element" + i + ".style");
  • }
  • }
  • function startanimate() {
  • setInterval("animate()", 20);
  • }
  • function setInitPositions(elements) {
  • var startloc = document.all.tags("LI");
  • var i = 0;
  • for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
  • elements[i+1].X = startloc[i].offsetLeft
  • startloc[i].offsetParent.offsetLeft - DOTSIZE;
  • elements[i+1].Y = startloc[i].offsetTop +
  • startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
  • }
  • elements[0].X = elements[1].X;
  • elements[0].Y = elements[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 = (elements[i].X - elements[j].X);
  • var dy = (elements[i].Y - elements[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) {
  • elements[0].X = Xpos;
  • elements[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(-elements[i].dx * RESISTANCE, -elements[i].dy * RESISTANCE);
  • var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
  • elements[i].dx += (DELTAT * accel.X);
  • elements[i].dy += (DELTAT * accel.Y);
  • if (Math.abs(elements[i].dx) < STOPVEL &&
  • Math.abs(elements[i].dy) < STOPVEL &&
  • Math.abs(accel.X) < STOPACC &&
  • Math.abs(accel.Y) < STOPACC) {
  • elements[i].dx = 0;
  • elements[i].dy = 0;
  • }
  • elements[i].X += elements[i].dx;
  • elements[i].Y += elements[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 (elements[i].Y >= height - DOTSIZE - 1) {
  • if (elements[i].dy > 0) {
  • elements[i].dy = BOUNCE * -elements[i].dy;
  • }
  • elements[i].Y = height - DOTSIZE - 1;
  • }
  • if (elements[i].X >= width - DOTSIZE) {
  • if (elements[i].dx > 0) {
  • elements[i].dx = BOUNCE * -elements[i].dx;
  • }
  • elements[i].X = width - DOTSIZE - 1;
  • }
  • if (elements[i].X < 0) {
  • if (elements[i].dx < 0) {
  • elements[i].dx = BOUNCE * -elements[i].dx;
  • }
  • elements[i].X = 0;
  • }
  • elements[i].obj.left = elements[i].X;
  • elements[i].obj.top = elements[i].Y;
  • }
  • }
  • </script>
  • ------------------------------------------------------------------------------------------------
  • Dans BODY:
  • <p><div id="element0" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; visibility:hidden; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element1" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element2" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element3" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element4" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element5" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <div id="element6" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
  • <p><img src="images/notes.gif" border="0"> </p>
  • </div> <script language="JavaScript">
  • // Lancement de la procédure d'affichage de la guirlande
  • init();
  • </script>
  • </p>
Entre <HEAD> et </HEAD>

<script language="JavaScript">
// Nombre d'images dans la guirlande
var nDots = 7;
// Position horizontale de départ de la guirlande
var Xpos = 137;
// Position verticale de départ de la guirlande
var Ypos = 39;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 10;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var elements = new Array();
// fonction principale d'affichage de la guirlande
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
elements[i] = new element(i);
}
if (!isNetscape) {
}
for (i = 0; i < nDots; i++) {
elements[i].obj.left = elements[i].X;
elements[i].obj.top = elements[i].Y;
}
if (isNetscape) {
startanimate();
} else {
setTimeout("startanimate()", 1000);
   }
}
function element(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.element" + i);
} else {
this.obj = eval("element" + i + ".style");
   }
}
function startanimate() {
setInterval("animate()", 20);
}
function setInitPositions(elements) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
elements[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
elements[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
elements[0].X = elements[1].X;
elements[0].Y = elements[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 = (elements[i].X - elements[j].X);
var dy = (elements[i].Y - elements[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) {
elements[0].X = Xpos;
elements[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(-elements[i].dx * RESISTANCE, -elements[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
elements[i].dx += (DELTAT * accel.X);
elements[i].dy += (DELTAT * accel.Y);
if (Math.abs(elements[i].dx) < STOPVEL &&
Math.abs(elements[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
elements[i].dx = 0;
elements[i].dy = 0;
}
elements[i].X += elements[i].dx;
elements[i].Y += elements[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 (elements[i].Y >=  height - DOTSIZE - 1) {
if (elements[i].dy > 0) {
elements[i].dy = BOUNCE * -elements[i].dy;
}
elements[i].Y = height - DOTSIZE - 1;
}
if (elements[i].X >= width - DOTSIZE) {
if (elements[i].dx > 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = width - DOTSIZE - 1;
}
if (elements[i].X < 0) {
if (elements[i].dx < 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = 0;
}
elements[i].obj.left = elements[i].X;
elements[i].obj.top =  elements[i].Y;
   }
}
</script>


------------------------------------------------------------------------------------------------
Dans BODY:
<p><div id="element0" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; visibility:hidden; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element1" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element2" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element3" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element4" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element5" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element6" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <script language="JavaScript">
// Lancement de la procédure d'affichage de la guirlande
init();
</script>
 </p>



 Sources du même auteur

AJOUTER DU TEXTE A LA POSITION DU CURSEUR DANS UN TEXTAREA
AJOUTER DU TEXTE DANS A LA FIN D'UN TEXTAREA

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600

Commentaires et avis

Commentaire de Scooby1 le 26/10/2002 00:47:33

Pas mal !

Commentaire de 8Tnerolf8 le 25/11/2005 18:00:12

Bon, ben en utilisant le code ci-dessus, je me suis aperçu que ça ne fonctionnait pas sous moteur Mozilla.

Voici donc ce script débuggé pour que cela marche aussi avec Netscape ou Firefox.

Pour voir un bel exemple de ce dernier, rendez-vous sur noel.mjcmermoz.asso.fr.

-------------------------------------------------------------------------------------------------

<HEAD>

<script language="JavaScript">
// Nombre d'images dans la guirlande
var nDots = 7;
// Position horizontale de départ de la guirlande
var Xpos = 137;
// Position verticale de départ de la guirlande
var Ypos = 39;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 10;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var elements = new Array();
// fonction principale d'affichage de la guirlande
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
elements[i] = new element(i);
}

for (i = 0; i < nDots; i++) {
document.getElementById("element"+i).style.left = elements[i].X;
document.getElementById("element"+i).style.top = elements[i].Y;
}
setTimeout("startanimate()", 1000);

}
function element(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
}

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

function setInitPositions(elements) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
elements[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
elements[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
elements[0].X = elements[1].X;
elements[0].Y = elements[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 = (elements[i].X - elements[j].X);
var dy = (elements[i].Y - elements[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) {
elements[0].X = Xpos;
elements[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(-elements[i].dx * RESISTANCE, -elements[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
elements[i].dx += (DELTAT * accel.X);
elements[i].dy += (DELTAT * accel.Y);
if (Math.abs(elements[i].dx) < STOPVEL &&
Math.abs(elements[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
elements[i].dx = 0;
elements[i].dy = 0;
}
elements[i].X += elements[i].dx;
elements[i].Y += elements[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 (elements[i].Y >= height - DOTSIZE - 1) {
if (elements[i].dy > 0) {
elements[i].dy = BOUNCE * -elements[i].dy;
}
elements[i].Y = height - DOTSIZE - 1;
}
if (elements[i].X >= width - DOTSIZE) {
if (elements[i].dx > 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = width - DOTSIZE - 1;
}
if (elements[i].X < 0) {
if (elements[i].dx < 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = 0;
}
document.getElementById("element"+i).style.left = elements[i].X;
document.getElementById("element"+i).style.top = elements[i].Y;
   }
}

</script>
</head>
<BODY>
<p><div id="element0" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; visibility:hidden; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element1" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element2" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element3" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element4" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element5" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <div id="element6" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="http://noel.mjcmermoz.asso.fr/images/Flocon.gif" border="0"> </p>
</div> <script language="JavaScript">
// Lancement de la procédure d'affichage de la guirlande
init();
</script>
</p>
</body>

Commentaire de MyPollux54 le 16/12/2005 23:37:10

Serait-il possible de transformer ce code pour que l'on puisse l'intégrer à une page en php????

Commentaire de badak9 le 24/12/2006 15:16:40

ou est l'image du flocon?

Commentaire de 8Tnerolf8 le 25/12/2006 12:06:23

Joyeux Noël tout le monde

Pour répondre à MyPollux54, oui, il est possible d'intégrer ce script dans du PHP. Il suffit de l'insérer dans un echo et d'échapper soit les guillemets, soit les apostrophes du script.

Quant à Badak9, je suis désolé, mais mon successeur a apparement supprimé le site noel.mjcmermoz.asso.fr. Du coup, les url pointant vers les flocons ne fonctionnent plus tu as à la place une croix rouge. Qu'à cela ne tienne, il te suffit de remplacer les src dans le script par une url valide, et tu pourras voir une guirlande correcte.

Commentaire de badak9 le 26/12/2006 08:22:52

Oui oui merci :-) ca j'ai bien vu que l'url n'était pas valide mais je n'avais pas de joli image de flocon sous la main :-)
J'ai donc utilisé une image de mon logo à la place, ce qui vas aussi bien finalement.

bonnes fêtes

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,702 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales