Déplacer visiblement un bloc

Signaler
Messages postés
7
Date d'inscription
mercredi 27 octobre 2004
Statut
Membre
Dernière intervention
19 septembre 2009
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour,

Après 2 jours de recherche je n'ai pas trouvé comment faire quelque chose qui me parait pourtant simple :
Un bouton qui déplace un bloc (div) à une certaine distance et une certaine vitesse. Un second clic sur le bouton redéplace depuis la nouvelle position du bloc et ainsi de suite. Il ne s'agit pas d'un "saut" vers une nouvelle position mais d'un déplacement visible.

Voici le code incomplet :

<html><head><title>Test, déplacement visible de bloc</title>
<style type="text/css">
.attributs1 {background-color:#FC0; position:absolute; top:100px; left:80px; width:100px; height:100px;}
.attributs2 {background-color:#0F0; position:absolute; top:100px; left:200px; width:100px; height:100px;}
</style>

<script type="text/javascript">
<!--
var vitesse = 50; // Une varible qui permette de regler la vitesse de déplacement

function deplacer(nombloc,x,y)
    {
    // Ici le script qui déplace le bloc dans la direction et à la vitesse demandée.
    }
//-->
</script>
</head>

BLOC 1

Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.

BLOC 2

Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.

</html>

Si vous avez des idées, merci par avance !

3 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
bonjour,

   je suppose que block 1 se dépace et va à la place de block 2 ?
   block 2 n'existe pas au départ, si ?
   
   si oui : block 1 = position:absolute,top:xxx,left:yyy dans style=
   la fonction déplacer() ajoute ( ou retranche ! ) une valeur ( 1, la
   même pour horizontal et vertical ? )
      à style.top et/ou style.left
      puis se "rappelle elle même" avec setTimeout, ce qui donnera le délai,
      et ce j'usqu'à atteindre les coordonnées voulues.

<hr />
cordialement   Bul    Site    M'écrire
Messages postés
7
Date d'inscription
mercredi 27 octobre 2004
Statut
Membre
Dernière intervention
19 septembre 2009

Merci pour ta réponse.

Je vois à peu près. Sauf que dans ce cas il s'agit plutôt d'un saut non ? On ne vera pas le bloc se déplacer ?

Pour te répondre, la page de test que j'ai codé comporte deux blocs à déplacer individuellement. C'est pour au final réaliser des blocs en colonne dont le contenu pourra être défiler en cliquant sur une flèche, un peu comme un scroll mais en mieux.

Cuisine
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>un saut.
pas tel que je le comprend.
un saut serait de mettre directement les nouvelles coordonnées.
ici je te propose de déplacer le div, progressivement, vers
son nouvel emplacement. délai et déplacement "paramétables"
et on voit donc le déplacement.
<hr />
cordialement   Bul    Site    M'écrire