如何使用jquery连续旋转图像

Question

我有一个用于图像旋转的jquery代码。问题是，它只旋转一次。如何在每次单击按钮时继续旋转。当用户上传图像或多个图像时，图像会自动插入div中。

 $(".img-button").find(".img-rotate").click(function(){
        $(this).parent(".img-button").siblings(".upload-img").css({'transform': 'rotate(-90deg)'});
    });

Answer 1

您可以尝试使用css和jquery组合来实现该效果。

<div><img class="image" src="your image source" alt="" /></div>

 .rotate-img {
  transform: rotate(90deg);
}

然后添加以下代码以触发按钮onclick

$(document).ready(function(){
  $("button").click(function(){
    $(".image").toggleClass("rotate-img");
  });
});

Answer 2

使用jquery data()方法

• + 90顺时针
• - 90逆时针

$('button').on('click', function() {
  let angle = +$('img').data('angle') + 90; // clockwise
  $('img')
    .css({'transform': `rotate(${angle}deg)`})
    .data('angle', angle)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://via.placeholder.com/150" data-angle="0">

<button>Rotate</button>

用于无限旋转

$('button').on('click', function() {
  $('img').addClass('infinte-rotation');
});

.infinte-rotation {
  -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://via.placeholder.com/150" data-angle="0">

<button>Rotate</button>