Bild drehen mit onclick

Ich versuche, ein toggle-button, wo mein Bild (ein Pfeil) wird um 180 Grad gedreht jeweils auf:

<a href='#' onclick='$(\"#divToggle\").slideToggle(\"slow\");'>
<img src='blue_down_arrow.png' onclick='$(this).rotate(180);' /></a>

<div id='divToggle' style='display:none;'>...CONTENT...</div>";

Dieser code toggle-div, aber das Bild dreht sich nur für den ersten Klick und dann bleibt "oben". Ich bin mit diesem : http://code.google.com/p/jqueryrotate/

  • zeig mir deinen code
InformationsquelleAutor Art Planteur | 2013-01-18
  1. 2

    Dies ist, weil der Wert für drehen Winkel ist absolut, nicht auf der Grundlage der letzten drehen.

    Arbeiten code:

    jQuery

    var rotate_factor = 0;

function rotateMe(e) {
    rotate_factor += 1;
    var rotate_angle = (180 * rotate_factor) % 360;
    $(e).rotate({angle:rotate_angle});
}

    HTML

    <img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

    Update: Kürzerer code

    var rotate_angle = 0;

<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>
    InformationsquelleAutor ATOzTOA
  2. 3

    Können Sie schreiben, wie diese. demo

    jQuery(document).ready(function(){
   var deg_temp =45;
  jQuery("#image1").click(function(){
     deg_temp = deg_temp+30;
  jQuery(this).rotate(deg_temp);
  })

});
    • Wie würden Sie schnappen Sie sich das gedrehte Bild zu speichern/ersetzen Sie die aktuelle?
    InformationsquelleAutor muthu
  3. 2

    Klicken Sie auf, um zu sehen, CSS3 transition demo

    sehen Sie sich diese demo. Es nutzt CSS3 für die transition + transform rotierenden

    .testRotate{
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.testRotate:hover{
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

    diese sind wesentlicher Bestandteil dieser demo =)

    • Aber die Frage fordert Sie auf klicken Sie auf drehen, nicht auf hover.
    InformationsquelleAutor Jason
  4. 1

    versuchen Sie dies:

    $('img').click(function(){
$('img').rotate({ angle: 0, bind:{
    "click":function(){
      $(this).rotate({animateTo:360});
    }
  }
 });
});
    InformationsquelleAutor Jai
  5. 1

    Verwenden CSS3 für die rotation:

    1. In Mozilla Firefox werden -moz-transform: rotate(180GRAD)
    2. In Webkit-basierten Browser, also Chrome: -webkit-transform: rotate(180GRAD)
    3. In Opera: -o-transform: rotate(180GRAD)
    4. Im IE: -ms-transform: rotate(180GRAD) (nur IE9)
    5. In pre-IE9: nicht leicht möglich ist, wird die Notwendigkeit der Verwendung von Matrix-Filter

    Verwenden jQuery-plugin drehen zu vereinen, die browser-Unterschiede.

    • Ich empfehle CSS3 zu.
    InformationsquelleAutor Rachel Gallen
  6. 1

    Dies ermöglicht es Ihnen, führen Sie eine zusätzliche Drehung der einzelnen clik

    var degrees = 0;
  $('.img').click(function 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/

    InformationsquelleAutor Rossitten
Schreibe einen Kommentar