Forum-webmaster
Technique - programmation => Javascript / DOM / Ajax => Message commencé par: schlough le le 11-04-2005 a 14:58:21

Titre: Deplacement objet
Posté par: schlough le le 11-04-2005 a 14:58:21

bonjour,

je ne connais pas du tout javascript donc si quelqu'un pouvait me donner un exemple de page et m'expliquer simplement comment faire pour qu'une image se déplace toute seule et aléatoirement (dans un cadre défini) sur une page web ca serait sympa.

j'aimerais savoir la même chose pour qu'un texte se déplace horizontalement d'un point A a un un point B, puis le faire revenir de B vers A et ainsi de suite..

Titre: Re:Deplacement objet
Posté par: pixyle le le 11-04-2005 a 15:27:21

Salut,

Si tu connais pas du tout javascript, c'est peut etre un peu ambicieux de commencer par là.

Par contre, tu as un très bon site de scripts : http://www.editeurjavascript.com/

En général, tu rempli un formulaire (genre l'image à faire bouger, d'où à où) tu valides et ça te sort le script en t'expliquant quoi en faire.

Voili

Titre: Re:Deplacement objet
Posté par: schlough le le 11-04-2005 a 15:29:16

ok merci

ambitieux c'est vrai mais etant developpeur jpense pouvoir m'adapter assez vite a n'importe quel langage de balisage maintenant

en plus jsusi en stage et fo ke je le fasse dc autant s'y mettre

Titre: Re:Deplacement objet
Posté par: pixyle le le 11-04-2005 a 23:17:08

Bah comme ça t'as les 2 ::) :
- faire: grâce à EJS c'est livré à l'heure ^^
- apprendre : en analysant le script

Sérieux, comme tu ne connais pas du tout js ça va être difficile de t'acheminer du début jusqu'à ton objectif, par le biais d'un forum. Aussi tu devrais commencer par un peu de théorie.
Si t'es dev tu comprend bien que pour comprendre un langage, on commence par "hello world"

Un bon site que j'aime bien, côté doc et exemples pour JS et HTML : http://fr.selfhtml.org/

A+

PS : tu devrais spécifier si tu as déjà des connaissances dans les langages côtés objets histoire qu'on te parle un langage compréhensible

Titre: Re:Deplacement objet
Posté par: schlough le le 12-04-2005 a 09:55:35

oauis je me doute bien que je vais pas apprendre javascript en 5 minutes mais bon on peut toujours apprendre deuc trois parties

sinon les langages que je connais :
oo : java, smalltalj
autres : c, sql, vb, html, css....

Titre: Re:Deplacement objet
Posté par: jb_gfx le le 13-04-2005 a 11:27:27

J'ai fait une petite fonction qui fait exactement ça. Deplacement d'un bloc (div) de gauche à droite, puis de droite à gauche en bloucle.

C'est perfectible mais ça te donnera une idée du principe (création d'un timer, ajout de la position à chaque mise à jour du timer).

La partie javascript :


Code:

<script type="text/javascript">
<!--
var delai = 25;            /* vitesse d'execution du timer en millisecondes */
var originex = 50;            /* position d'origine */
var limitex = 500;            /* position maximale */
var offsetx = 5;               /* déplacement sur l'axe en pixels pour chaque execution du timer */
var posx = originex;   /* on démarre au point d'origine */

function move() {
   clearTimeout(timerDeplace); /* si le timer existe, on l'arrête */
   document.getElementById('bougemoi').style.left = posx + "px";
   posx += offsetx;
   if(posx > limitex) {                                    /* si on dépasse la valeur de limitex... */
      offsetx = Math.abs(offsetx) - offsetx*2;   /* on inverse la valeur de l'offset */
   } else if (posx < originex) {                        /* si on dépasse la valeur d'origine... */
      offsetx = Math.abs(offsetx);                     /* on inverse la valeur de l'offset */
   }
   var timerDeplace = setTimeout('move()',delai); /* lancement du timer */
}

/* Au chargement de la page on lance une fonction custom (run) qui execute les différents scripts qu'on utilise dans la page */
window.onload = function run() {
   move();
}
//-->
</script>


Le bloc à déplacer doit avoir des propriétés CSS, exemple :


Code:

#bougemoi {
position: absolute; /* obligatoire */
left: 50px;
top: 10px;
border: 1px solid #000;
padding: 10px;
background: #ff0;
}


Et voilà comment ajouter ton bloc dans ton HTML :


Code:

<div id="bougemoi">
<img src="images/chien.ico" alt="chien" />
</div>


Ici le contenu est une image, mais ça pourrait être n'importe quoi (du texte, etc...)

Titre: Re:Deplacement objet
Posté par: schlough le le 13-04-2005 a 11:44:03

merci beaucoup c'est quasiment pile poil ce qu'il me fallait et oui ca va m'aider a comprendre


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.