Déplacer visiblement un bloc

**Cuisine** · 04/09/2006, 15h50

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<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>
<body>
<div id="bloc1" class="attributs1">
BLOC 1<br>
Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.
</div>
 
<div id="bloc2" class="attributs2">
BLOC 2<br>
Lorem ipsum dolor sit amet, c elitr, sed diam nonuolutpat.
</div>
 
<input type="button" value="Déplacer 'bloc1' vers le bas" onClick="deplacer(bloc1,0,40)">
<input type="button" value="Déplacer 'bloc2' vers la droite" onClick="deplacer(bloc2,40,0)">
</body></html>

Alors ? Simple ou pas simple ?

Cuisine

**SpaceFrog** · 04/09/2006, 15h55

simple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

**Cuisine** · 04/09/2006, 17h40

Excelent ! merci C'est joli à voir.

A un détail près... quand il commence à bouger il part à l'infini. Comment lui dire "déplace toi seulement sur 100 pixels" ou "déplace toi seuelement pendant 1 seconde" en javascript ? L'ajout d'un délai est moins bien que de lui donner une distance je suppose.

Ca complique beaucoup ?

Cuisine

**SpaceFrog** · 04/09/2006, 18h02

max déplacement ...

stocker la position de départ du bloc et tester à chaque déplacement si la valeur absolue de la différence de coordonnées est supérieure au max autorisé ...

pour le chronométrage un setTimeout ...

Déplacer visiblement un bloc

JavaScript

Vue hybride

Discussions similaires

Partager

Partager