La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Deplacement objet
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Deplacement objet  (Lu 644 fois)
Deplacement objet
« sur: le 11-04-2005 a 14:58:21 »
schlough
Membre récent
*

Hors-Ligne

Messages: 18



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

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..

Rapporter au modérateur  

Re:Deplacement objet
« Répondre #1 sur: le 11-04-2005 a 15:27:21 »
pixyle
Habitué
***

Hors-Ligne

Sexe: Femelle
Messages: 332





Voir le Profil    E-Mail
Répondre avec citation

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

Rapporter au modérateur  

Se demande ce qu'il y a de pire qu'un bug inreproductible |-(
Re:Deplacement objet
« Répondre #2 sur: le 11-04-2005 a 15:29:16 »
schlough
Membre récent
*

Hors-Ligne

Messages: 18



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

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

Rapporter au modérateur  
Re:Deplacement objet
« Répondre #3 sur: le 11-04-2005 a 23:17:08 »
pixyle
Habitué
***

Hors-Ligne

Sexe: Femelle
Messages: 332





Voir le Profil    E-Mail
Répondre avec citation

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

Rapporter au modérateur  

Se demande ce qu'il y a de pire qu'un bug inreproductible |-(
Re:Deplacement objet
« Répondre #4 sur: le 12-04-2005 a 09:55:35 »
schlough
Membre récent
*

Hors-Ligne

Messages: 18



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

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....

Rapporter au modérateur  
Re:Deplacement objet
« Répondre #5 sur: le 13-04-2005 a 11:27:27 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

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...)

Rapporter au modérateur  

http://www.pixemedia.com
Re:Deplacement objet
« Répondre #6 sur: le 13-04-2005 a 11:44:03 »
schlough
Membre récent
*

Hors-Ligne

Messages: 18



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

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

Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg