Déplacer un objet

**iMech** · 23/06/2015, 22h54

bonsoir

j'ai une image d'éprouvette que je veux la déplacer et verser son contenu dans un Un électrolyseur vide, lorsque je clic dessus puis elle retourne à sa place initiale

c'est une simulation d'une expérience chimique qui comporte plusieurs animations , mais je débute par l'éprouvette .
Nom : sc2.png
Affichages : 579
Taille : 2,2 Ko

Nom : sc2.png
Affichages : 579
Taille : 2,2 Ko

je ne sais pas est ce que je dois utiliser javascript ou jQuery ou css ou le tous

j'ai commencé par une page html ou j'ai positionné mes photos et une page css

Code html :

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

1
2
3
4
5
<body>
<img src="images/sc2.png" alt="sc2" name="id1" id="id1" />
<img src="images/sc1.png" alt="sc1" name="id2" width="536" height="555" id="id2" />
<img src="images/sc2.png" alt="sc3" name="id3" width="114" height="216" id="id3" />
</body>

Code css :

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
@charset "utf-8";
/* CSS Document */
 
div{
position:absolute;
}
#id1{
     width:114px;
     height:216px;
     top:106px;
     left:259px;
 
}
#id2{
     width:536px;
     height:555px;
     top:106px;
     left:259px;
 
}
#id3{
     width:114px;
     height:216px;
     top:106px;
     left:259px;
 
}

**01001111** · 24/06/2015, 00h11

Bonsoir.

Si tu veux animer le liquide en deux dimensions, il faudra passer par un canvas 2D plutôt qu'une image, mais ça risque d'être un peu difficile si tu es débutant.

Pour le déplacement, je suis partisan du onclick ou onmousedown pour déclencher la fonction, qui lui même déclencherait un onmousemove pour le déplacement (qui se ferait par jquery ou js), et quand terminé par onclick ou onmouseup, selon le premier ou deuxième cas, on retire l'écouteur de mousemove. Sinon tu as maintenant mais moins compatible de manière descendante, le drag and drop html5:
voir sur le MDN

**iMech** · 24/06/2015, 01h00

merci pour votre réponse vous m'avez donné une piste

juste une remarque je veux juste faire un simple clic sur l'image de l'éprouvette et elle se déplace automatiquement ver l'électrolyseur elle fait une demi rotation ( comme ci elle verse sont contenu) enfin elle retourne à sa place initiale.

**melka one** · 24/06/2015, 09h58

jour

une autre piste son les annimation css

**Theta** · 24/06/2015, 10h42

Il est également possible d'utiliser des animations svg (d'autant plus que l'illustration de l'éprouvette se porte bien au vectoriel).

**01001111** · 24/06/2015, 12h31

Je suis fan des animations svg, malheureusement SMIL n'est toujours pas géré par IE 11, ni même Spartan( IE12).

**iMech** · 24/06/2015, 12h52

par la fin l'animation sera utilisé sur des tablettes android

est ce que l'SVG est pris en charge ?

si c'est possible un exemple de code JS ou jquery ;

où il y a une trajectoire de mouvement après un clic souris

**SylvainPV** · 24/06/2015, 13h14

Le plus simple serait d'utiliser Flash et d'exporter en HTML5. Ou alors d'utiliser un outil en ligne comme https://www.animatron.com/

Déplacer un objet

JavaScript

Discussions similaires

Partager

Partager