Déplacer visiblement un bloc

Version imprimable

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:

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">  </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

simple:

Code:

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>

04/09/2006, 16h40
Cuisine

Presque

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
04/09/2006, 17h02
SpaceFrog

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