Problème pour faire tourner une image JS
spylller
Messages postés
395
Date d'inscription
Statut
Membre
Dernière intervention
-
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un problème, mon code pour faire tourner une image ne marche pas :
Pourquoi ?
Merci !
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 !
A voir également:
- Faire tourner une image sur elle même gif
- Tourner l'écran - Guide
- Image iso - Guide
- Légender une image - Guide
- Comment rechercher une image sur google - Guide
- Imprimer plusieurs fois la même image sur une page ✓ - Forum Logiciels
2 réponses
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)
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>
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)");
});
});
Merci beaucoup !