Sujet Précédent Sujet Suivant

Déplacer visiblement un bloc

cs_cuisine Messages postés 7 Date d'inscription mercredi 27 octobre 2004 Statut Membre Dernière intervention 19 septembre 2009 - 4 sept. 2006 à 14:39
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 5 sept. 2006 à 09:51
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

Réponse 1 / 3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 sept. 2006 à 14:57
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
0
Réponse 2 / 3
cs_cuisine Messages postés 7 Date d'inscription mercredi 27 octobre 2004 Statut Membre Dernière intervention 19 septembre 2009
4 sept. 2006 à 15:38
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
0
Réponse 3 / 3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
5 sept. 2006 à 09:51
>>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
0

Discussions similaires

mettre en commentaire tout un bloc
Daydayer -
Daydayer -

3 réponses
passer en commentaire plusieurs lignes de code VBA rapidement
zncpo -
zncpo -

2 réponses
VBA Excel : Commentaire
KMIKZ -
KMIKZ -

13 réponses
Commentaire
hamardfred -
ScSami -

4 réponses
Question idiote : mise en commentaire de plusieures lignes
cs_oluha -
cs_oluha -

2 réponses
Rejoignez-nous