jquery faire pivoter l'image onclick

Je suis en train de le faire (rotation de 90 degrés), mais il échoue sans erreur.
Cette image est à l'intérieur d'un <a></a> BALISE où il a déjà une bascule fonction jquery.

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

source d'informationauteur Art Planteur

  1. 14

    Envisager une extension jQuery tels que: jQueryRotate

    Il va faire la rotation à l'intérieur de la onclick beaucoup plus facile et plus lisible.

  2. 44

    Selon la version de votre navigateur internet vous avez besoin de soutien, vous pouvez essayer de CSS tranforms.

    D'abord, de définir une classe CSS comme ceci:

    .rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

    Et puis vous pouvez utiliser jQuery pour ajouter la classe en cliquant sur le lien:

    <img src="down_arrow.png" onclick="$(this).addClass('rotated');" />
  3. 18

    Utiliser une combinaison de règles css -webkit-transform et -moz-transform sur l'image, cliquez.Par exemple pour faire pivoter l'image de 90 degrés appliquer les règles css suivantes sur cliquez sur

    $('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});
  4. 7

    caisse: JqueryRotate

    ce ont peu de choses à faire, vous pouvez voir un exemple de code dans l'image elle-même.

    jquery faire pivoter l'image onclick

    Donc dans votre cas vous pouvez faire ceci:

    $(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});
  5. 3

    Ce qui vous permettra d'effectuer une rotation de chaque clik

    var degrés = 0;
    $('.img').cliquez sur(fonction rotateMe(e) {

    degrees += 90;

//$('.img').addClass('rotated'); //for one time rotation

$('.img').css({

  'transform': 'rotate(' + degrees + 'deg)',
  '-ms-transform': 'rotate(' + degrees + 'deg)',
  '-moz-transform': 'rotate(' + degrees + 'deg)',
  '-webkit-transform': 'rotate(' + degrees + 'deg)',
  '-o-transform': 'rotate(' + degrees + 'deg)'
});

    https://jsfiddle.net/Lnckq5om/1/

  6. 0

    C'est l'exemple de rotation de l'image de 90deg que suivant le code ci-dessous:

    $(document).ready(function(){
    $("img").click(function(){
         $(this).rotate(90);
    });
 });