Поворот и разворачивание изображения onClick с javascript

Я пытаюсь найти, как заставить изображение поворачиваться на 90 градусов вправо при первом щелчке, а при повторном нажатии вернуться к исходной ориентации. Я рассматривал этот вопрос, сделанный другим человеком при переполнении стека, но this не включал изображение, вращающееся назад, когда его снова нажимали.Поворот и разворачивание изображения onClick с javascript

Пока что CSS показал потенциал, но я не могу заставить изображение поворачиваться обратно во втором клике.

Это изображение, если вам нужна ссылка: image

Вот мой сценарий:

<html> 
    <head> 
     <style> 
      .rotate { 
       -ms-transform: rotate(90deg); 
       -webkit-transform: rotate(90deg); 
       transform: rotate(90deg); 
      } 

      .normal { 
       -ms-transform: rotate(0deg); 
       -webkit-transform: rotate(0deg); 
       transform: rotate(0deg); 
      } 
     </style> 

     <script> 
     function Rotate() { 
      var rotate = 0 
      var rotate = rotate + 1 

      if (rotate = 2) { 
       document.getElementbyID(image).className = 'normal'; 
      } 
      else if (rotate <= 3) { 
       var rotate = 0 
       location.reload(); 
      } 
      else { 
       document.getElementbyID(image).className = 'rotate'; 
      } 
     } 
     </script> 


    </head> 
    <body> 
     <img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/> 

    </body> 
</html>

источник

2016-04-26 Cody Bennett

Возможный дубликат http://stackoverflow.com/questions/16794310/rotate-image-with-javascript – ItzJavaCraft

Вот фрагмент кода работает, что вы ар пытаетесь достичь:

function Rotate() { 
 
\t \t var element = document.getElementById('image'); 
 

 
\t \t if (element.className === "normal") { 
 
\t \t \t element.className = "rotate"; 
 
\t \t } 
 
\t \t else if (element.className === "rotate") { 
 
\t \t \t element.className = 'normal'; 
 
\t \t } 
 
\t }

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

 
.normal { 
 
    -ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/> 
 

 
</body> 
 
</html>

Имейте в виду, что вы имели несколько синтаксических ошибок в коде например: document.getElementById() и используя сингл = для сравнения.

Вы можете проверить свою консоль браузера для проверки таких прав.

источник

2016-04-26 23:46:53

help @ https://magento.stackexchange.com/q/184044/51361 – Rathinam

У вас есть много ошибок в вашем сценарии первый: вы переобъявить вращаются во многих частях сценария, второй: в пределах, если вы должны сравнить с == и не =, это последнее, чтобы присвоить значение, третье: это getElementById не getElementbyID

Попробуйте с помощью этого сценария:

<script> 
    var rotate = false; 

    function Rotate() { 

     if (rotate == true) { 
      document.getElementById('image').className = 'normal'; 
      rotate = false; 
     } 
     else { 
      document.getElementById('image').className = 'rotate'; 
      rotate = true; 
     } 
    } 
</script>

источник

2016-04-26 23:40:25

В дополнение к предложениям Хосе Рохаса, я нашел способ сбросить ориентацию, изменив какой-либо скрипт на странице, предложенной этим сайтом. Вы можете просмотреть его here. Я буду изменять сценарии CSS для каждого другого угла, поэтому процесс может длиться вечно.

источник

2016-04-26 23:48:26

Поворот и разворачивание изображения onClick с javascript

ответ

Смежные вопросы