如何點擊圖片旋轉

我有一個圖像，每次點擊它我想旋轉180度。這是我試過的代碼：如何點擊圖片旋轉

<img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/slide.png"/>

$('#showLayers').click(function() { 
    $('#showLayers img').animate({ rotate: 180 }); 
});

此代碼不能出於某種原因。任何想法爲什麼上面的代碼不起作用？

來源

2016-12-06 Michael

經過這個堆棧溢出[鏈接]（http://stackoverflow.com/questions/14396614/rotate-image-with-onclick）可可以幫助你。 –

[CSS jquery.animate（）循環瀏覽器的可能重複]（http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate） – Justinas

首先請注意您的問題是因爲選擇器不正確。它應該是$('#showLayers')而不是$('#showLayers img') - 或者甚至只是$(this)，因爲您處於點擊處理程序的範圍內。

其次，注意，您可以通過使用CSS動畫，並根據需要簡單地切換在JS類提高邏輯：

$('#showLayers').click(function() { 
 
    $(this).toggleClass('rotate'); 
 
});

#showLayers { 
 
    transition: transform 0.3s; 
 
} 
 

 
.rotate { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

來源

2016-12-06 09:09:51

-1

變化showLayers img變爲#showLayers。

另外rotate: 180是無效的樣式。有關如何旋轉div的信息，請參閱this answer。

來源

2016-12-06 09:06:43

jQuery中的.animate()方法只接受整數作爲值的屬性，因此「180deg」是無效的，而不是創建一個類，將其切換

$(document).on('click', ".a", function() { 
 
    $(".a").toggleClass('a_rotated'); 
 
})

.a { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 
.a_rotated { 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="a"></div>

來源

2016-12-06 09:13:51

試試這個代碼：

 
$('#showLayers').click(function() { 

    $('#showLayers img').css('transform', 'rotate(180deg)'); 

});

來源

2016-12-06 09:22:23

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    var rot =180; 
    function rotateImage(test){ 
     test.style.webkitTransform="rotate("+rot+"deg)"; 

    } 
</script> 
</head> 
<body> 

<div id="imgWrapper"> 
    <img src="test.png" id="image" onclick="rotateImage(this)"> 
</div> 

</body> 
</html>

來源

2016-12-06 09:22:34

好吧，你可以使用jquerycss方法與rotate。隨着變量的增加，您的圖片以360度（180乘180）旋轉。

請嘗試：

var angle = 0; 
 
$('#showLayers').click(function() { 
 
    angle += 180 
 
    $(this).css('-webkit-transform','rotate('+angle+'deg)'); 
 
});

#showLayers { 
 
    transition: transform 0.3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

來源

2016-12-06 09:25:22

有很多方法可以做到這一點。下面是方式之一：

var inti = 180; 

$('img').click(function(){  
    var rotate = "rotate(" + inti + "deg)"; 
      var trans = "all 0.3s ease-out"; 
    $(this).css({ 
     "-webkit-transform": rotate, 
       "-moz-transform": rotate, 
       "-o-transform": rotate, 
       "msTransform": rotate, 
       "transform": rotate, 
       "-webkit-transition": trans, 
       "-moz-transition": trans, 
       "-o-transition": trans, 
       "transition": trans 
    }); 
    inti += 180; 
});

DEMO：https://jsfiddle.net/1464bgn2/

來源

2016-12-06 09:25:29 Sandy

如何點擊圖片旋轉

回答

相關問題