Question

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

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

Answer 1

使用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>

Answer 2

您可以尝试将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");
  });
});

如何使用jQuery连续旋转图像

2 个答案: