Как повернуть изображение .onclick - PullRequest
Новая
       7

Как повернуть изображение .onclick

0 голосов
/ 16 сентября 2018

Мне трудно повернуть изображение, когда я нажимаю на него.

Я прикрепил ссылку на скрипку с моими HTML, CSS и JS

http://jsfiddle.net/5x9tgo07/32/

Вот мой HTML 

<html>
  <header>
    <h1 id='heading'>SELF</h1>
  </header>
  <hr>
  <body>
    <div class='introCard'>
      <img id='self' src="https://image.ibb.co/djffuz/self_eye_centered.jpg"/>
    </div>
  </body>
</html>

Здесьмой CSS 

header {
  width: 100%;
  height: 75px;
  display: flex;
  flex-direction:column;
  align-items: center;
}

.introCard {
  width: 100%;
  margin-top: 35px;
  margin-bottom: 25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center
}

div img {
  width: 35%;
}

hr {
  width: 50%
}

Вот мой JS 

let imageToSpin = document.getElementById('self');

function spinImage() {
    imageToSpin.rotate(20 * Math.PI/180);
}

imageToSpin.onclick = spinImage;

Ответы [ 3 ]

0 голосов
/ 16 сентября 2018

rotate не является методом объекта Element.

Надлежащим способом поворота изображения будет добавление (или переключение) класса CSS и поворот его с помощьюa rotate().

Используя ваш пример:

Файл JS 

let imageToSpin = document.getElementById('self');
imageToSpin.onclick = function () {
  imageToSpin.classList.toggle('rotated')
};

Файл CSS 

.rotated {
  transform: rotate(90deg)
}

И, конечно же, изображение с идентификатором self в HTML где-то.

Вот ваш обновленный JSFiddle.

Если вам нужно вычислить deg в JS, то вы можете вручную установить свойство CSS в функции onclick.

0 голосов
/ 16 сентября 2018

Вот как вы можете быстро и быстро настроить его: 

  var rotate_angle = 0;

  <img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>
0 голосов
/ 16 сентября 2018

создайте замыкание вокруг материала, который вы хотите использовать, а затем используйте style.transform примерно так: 

let imageToSpin = document.getElementById('self');

function spinImage(imageToSpin) {
  var count = 0
  return function() {
    count += 10;
    imageToSpin.style.transform = `rotate(${count}deg)`;
  }
}

imageToSpin.onclick = spinImage(imageToSpin);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...