Signaler

Problème pour faire tourner une image JS

Posez votre question spylller 212Messages postés dimanche 1 mars 2015Date d'inscription 23 novembre 2016 Dernière intervention - Dernière réponse le 19 oct. 2016 à 21:43
Bonjour,
J'ai un problème, mon code pour faire tourner une image ne marche pas :
<body>
      	<img id="image"src="images/image.png"/>

      	<script src="jquery/jquery.js"></script>
      	<script>

			var angle = 0;
			$('#image').click(function() {
			    angle += 15;
			    $("#image").rotate(angle);
			});

		</script>
      </body>

Pourquoi ?
Merci !
Afficher la suite 
Utile
+0
moins plus
Bonsoir.

Premiere raison rotate() n'existe pas comme fonction jquery
$("#image").rotate(angle);

deuxième raison tu confond les portées des variables.
Il faut utiliser le css (de niveau 3 il me semble)

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
	<style>
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
	<script>
	$( document ).ready(function() {
		$('img').click(function() {
			$(this).css("transform", "rotate(15deg)");
		});
	});
	</script>
</head>
	<body>
      	<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5phLRQNnkgMvPsVOKW5LPMwzxuZR+IzViWMsHKlTlWA7ZyF5/SopE/elsAr5gYe4ximSV5WYqxUkfIvT8KR9/m9yfMHanGNtpHfYB+uakKHcSBzvLfpikBZL/AChcjgDg9ahdix9+n0p7HcNw59/WopAeuOpzTAO4NP7gmmISRyMGlVyG6d+lID//2Q=="/>
     </body>
</html>
spylller 212Messages postés dimanche 1 mars 2015Date d'inscription 23 novembre 2016 Dernière intervention - 19 oct. 2016 à 20:56
Ah, car j'avais vu rotate() sur un forum, comme quoi faut toujours faire gaffe.
Merci beaucoup !
Répondre
Ajouter un commentaire
Utile
+0
moins plus
Encore un autre script pour faire tourner l'image plusieurs fois a chaque clics

	var valeurDeg = 0;
	var angle = 15;
	
	$( document ).ready(function() {
		$('img').click(function() {
			
			window.valeurDeg += window.angle;
			var valeurDeg = window.valeurDeg;
			
			$(this).css("transform", "rotate("+valeurDeg+"deg)");
		});
	});
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !