Image qui tourne suite à un clic

**krapoulos** · 02/05/2016, 17h02

Bonjour,
Merci pour votre aide.

J'ai récuperé un bout de script qui est censsé faire tourner une image suite à un clic.

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
<html>
<head>
<style type="text/css">
.rotated-image {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
</style>
 
</head>
<body>
 
<script> 
function myFunction() {
  var img = document.getElementById("image");
  img.setAttribute("class", "rotated-image");
}
</script> 
<section id="middle">
    <img id="image" src="test.gif" >   
    <button onclick="myFunction()">Click me</button>
</section>
 
</body>
</html>

Actuellement l'image tourne q"une seule fois et de 40 degrés vers la droite.
Mon problème est que je voudrai que l'image tourne de 40 degrés à chaque clic

Merci pour votre aide

**NoSmoking** · 02/05/2016, 19h14

Bonjour,
j'entrevois au moins 2 façon de procéder.

• changement de la class
création de class CSS correspondant chacune à une étape de la rotation

Code css :

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

1
2
3
4
5
6
7
8
9
.rotated-0 {transform: rotate(0);}
.rotated-1 {transform: rotate(40deg);}
.rotated-2 {transform: rotate(80deg);}
.rotated-3 {transform: rotate(120deg);}
.rotated-4 {transform: rotate(160deg);}
.rotated-5 {transform: rotate(200deg);}
.rotated-6 {transform: rotate(240deg);}
.rotated-7 {transform: rotate(280deg);}
.rotated-8 {transform: rotate(320deg);}

ensuite dans ta fonction tu récupéres le numéro de la classe via un split() et tu incrémentes

Code :

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

1
2
3
4
5
6
function myFunction() {
  var img = document.getElementById("image");
  var c =  img.className.split('-');            // c[0] contient 'rotated' et c[1] le numéro de la class
  c =  c[0] +'-' +((parseInt( c[1]) +1 )% 9)    // on incrémente et on tourne à 8
  img.setAttribute("class", c);
}

Nota :
il te faut mettre la class="rotated-0" sur ton image pour le début

Code html :

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

<img id="image" src="nom_immage.jpg" class="rotated-0">

• changement en live de transform
récupération de l'angle dans la propriété style.transform de l'image, incrémentation et application

Code :

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

1
2
3
4
5
6
function myFunction() {
  var img = document.getElementById("image");
  var t = img.style.transform.match(/(\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  var val = ( t[0] *1 +40) % 360;                      // incrémentation de 40
  img.style.transform = 'rotate(' +val +'deg)';
}

**krapoulos** · 02/05/2016, 20h32

re,

Merci pour ta réponse rapide et surtout efficace

j'ai choisi pour info la deuxième solution

ci-joint le code actuel

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
<html>
<head>
<style type="text/css">
.rotated-image {
-ms-transform: rotate(36deg); /* IE 9 */
-webkit-transform: rotate(36deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(36deg);  /* FF3.5/3.6 */
-o-transform: rotate(36deg);  /* Opera 10.5 */
-sand-transform: rotate(36deg);
transform: rotate(36deg);
}
</style>
</head>
<body>
<script> 
function myFunctionDroite() {
  var img = document.getElementById("image");
  var t = img.style.transform.match(/(\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  var val = ( t[0] *1 +36) % 360;                      // incrémentation de 40
  img.style.transform = 'rotate(' +val +'deg)';
}
function myFunctionGauche() {
  var img = document.getElementById("image");
  var t = img.style.transform.match(/(\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  var val = ( t[0] *1 +(360 -36)) % 360;                      // incrémentation de 40
  img.style.transform = 'rotate(' +val +'deg)';
}
</script> 
 
<section id="middle">
<img id="image" src="test.gif" >   
    <button onclick="myFunctionGauche()"> Gauche </button>
    <button onclick="myFunctionDroite()"> Droite </button>
</section>
</body>
</html>

par contre avant de mettre résolu pour se sujet peux tu me dire comment faire pour afficher à l’écran le degré de rotation ?

Par avance merci

**NoSmoking** · 02/05/2016, 22h05

Il te suffit d'afficher la valeur qui se trouve dans la variable val via par exemple

Code :

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

document.getElementById('angle').textContent = val +'\u00B0';

pour peu que tu ais un élément dans ton code ayant pour id="angle".

Une remarque quand même sur tes fonctions, il suffit de faire une seule fonction en passant en paramètre le sens +1/-1, inutile de les multiplier.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function myFunction(sens) {
  var img = document.getElementById("image");
  // changement de la regExp pour récupérer le signe
  var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  // suppression du modulo 360
  var val = (( t[0] *1 +(36 *sens)));                        // incrémentation de 36
  // application de la rotation
  img.style.transform = 'rotate(' +val +'deg)';
  // affichage de l'angle
  document.getElementById('angle').textContent = val +'\u00B0';
}

il suffit maintenant d’appeler les fonctions comme suit

Code html :

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

1
2
3
4
<button onclick="myFunction(-1)">Gauche</button>
<button onclick="myFunction(1)">Droite</button>    
<!-- pour affichage de l'angle -->
<span id="angle"></span>

**krapoulos** · 02/05/2016, 22h21

woah respect

mais il y a un problème j'arrive a avoir des angles à 756° alors que le max est 360° sauf erreur de ma part !!!!

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
<html>
<head>
<style type="text/css">
.rotated-image {
-ms-transform: rotate(36deg); /* IE 9 */
-webkit-transform: rotate(36deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(36deg);  /* FF3.5/3.6 */
-o-transform: rotate(36deg);  /* Opera 10.5 */
-sand-transform: rotate(36deg);
transform: rotate(36deg);
}
</style>
</head>
<body>
<script> 
function myFunction(sens) {
  var img = document.getElementById("image");
  // changement de la regExp pour récupérer le signe
  var t = img.style.transform.match(/(\+?\-?\d+)/g) || [0];  // on met ||[0) pour le 1st passage
  // suppression du modulo 360
  var val = (( t[0] *1 +(36 *sens)));                        // incrémentation de 36
  // application de la rotation
  img.style.transform = 'rotate(' +val +'deg)';
  // affichage de l'angle
  document.getElementById('angle').textContent = val +'\u00B0';
}
</script> 
<section id="middle">
 
    <img id="image" src="test.gif" >  
<button onclick="myFunction(-1)">Gauche</button>
<button onclick="myFunction(1)">Droite</button>    
<!-- pour affichage de l'angle -->
<span id="angle"></span>
</section>
 
</body>
</html>

merci pour ton aide

**NoSmoking** · 02/05/2016, 22h26

...sauf erreur de ma part

un looping c'est un 360°, un double looping c'est un 720° etc...

Pour l'affichage tu peux faire un « modulo 360 »

Code :

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

document.getElementById('angle').textContent = val% 360 +'\u00B0';

Image qui tourne suite à un clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager