如何使用jquery连续旋转图像答案

【问题标题】：How to rotate image continuously using jquery如何使用jquery连续旋转图像
【发布时间】：2019-04-13 05:57:41
【问题描述】：

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

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

【问题讨论】：

请接受一个有效的答案

标签： jquery image rotation image-rotation

【解决方案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");
  });
});

【讨论】：

【解决方案2】：

使用jquerydata()方法

+ 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>

【讨论】：