使用javascript旋轉和旋轉圖片onClick

我一直在試圖找到如何讓圖像在第一次點擊時向右旋轉90度，再次單擊時，返回到原始方向。我在看堆棧溢出的另一個人提出的這個問題，但this沒有包含再次點擊時旋轉的圖像。使用javascript旋轉和旋轉圖片onClick

到目前爲止，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

下面是一個片段運行你的AR想要達到的：

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（）並使用單個=進行比較。

你可以檢查你的瀏覽器控制檯檢查這些erros。

來源

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

除了Jose Rojas提出的建議外，我找到了一種通過修改本網站建議的頁面上的某些腳本來重置方向的方法。您可以查看它here。我會修改其他角度的CSS腳本，因此這個過程可以永遠持續下去。

來源

2016-04-26 23:48:26

使用javascript旋轉和旋轉圖片onClick

回答

相關問題