Question

Tôi đang cố gắng để đạt được điều này (90 độ xoay), nhưng nó không thành công mà không có lỗi. Hình ảnh này nằm trong một <a></a> TAG, nơi đã có chức năng chuyển đổi jquery.

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

Answer 1

Hãy xem xét một phần mở rộng jQuery như: jQueryRotate

Nó sẽ làm cho quay bên trong dễ dàng hơn onclick hơn và dễ đọc hơn.

Answer 2

thanh toán này: JqueryRotate

này có những điều nhỏ nhặt để làm, bạn có thể xem ví dụ một mã trong hình ảnh riêng của mình.

Vì vậy, trong trường hợp của bạn, bạn có thể làm điều này:

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

Answer 3

Tùy thuộc vào phiên bản trình duyệt bạn cần hỗ trợ, bạn có thể thử tranforms CSS.

Đầu tiên, xác định một lớp CSS như thế này:

.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 */ 
} 

Và sau đó bạn có thể sử dụng jQuery để thêm lớp khi nhấn vào liên kết:

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

Answer 4

Sử dụng một sự kết hợp các quy tắc css -webkit-transform và -moz-transform khi nhấp vào hình ảnh.Ví dụ để xoay hình ảnh bằng 90 độ áp dụng theo các quy tắc css khi nhấp vào

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

Answer 5

Điều này sẽ cho phép bạn thực hiện một vòng quay bổ sung cho mỗi 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/

Answer 6

Đây là ví dụ để xoay hình ảnh 90deg như sau mã bên dưới:

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