Как вращать изображение непрерывно с помощью jquery - PullRequest
Новая
       22

Как вращать изображение непрерывно с помощью jquery

0 голосов
/ 13 апреля 2019

У меня есть код jquery для поворота изображения.Проблема в том, что он вращается только один раз.Как сделать так, чтобы вращение продолжалось при каждом нажатии кнопки.Изображение автоматически вставляется в div, когда пользователь загружает изображение или несколько изображений. 

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

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

Вы можете попробовать комбинацию 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");
  });
});
0 голосов
/ 13 апреля 2019

Используя 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>
...