用一個按鈕使用javascript旋轉div

我想用js使用onclick函數旋轉div，但是當我單擊我的按鈕時什麼也沒有發生。有什麼建議麼？我希望能夠不斷點擊90度旋轉按鈕，而不僅僅是一次。用一個按鈕使用javascript旋轉div

<html> 
    <form action="#" method="post"> 
     <input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br> 
     <input type="button" value="Show Image" id="btn1" /> 
    </form> 
    <div id="photo"></div> 
    <script> 
     document.getElementById('btn1').addEventListener('click', function(){ 
     document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />'; 
     }); 
    </script> 
    <input type="button" value="Rotate" onclick="rotatePhoto()"> 
    <script>function rotatePhoto(){ 
     var img = document.getElementById("photo"); 
     img.rotate(20*Math.PI/90); 
     } 
    </script> 
</html>

來源

2015-04-07 Stevo

你不能用javascript來做到這一點，除非你使用的是<canvas>。你必須這樣設置的CSS屬性：

-ms-transform: rotate(7deg); /* IE 9 */ 
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 
transform: rotate(7deg);

因此，也許是這樣的：

document.getElementById('photo').style.transform = "rotate(30deg)";

編輯

HTML

<img id="photo" src="img.png"> 
<button id="button">rotate</button>

document.getElementById("button").onclick = function(){ 
    var curr_value = document.getElementById('photo').style.transform; 
    var new_value = "rotate(30deg)"; 
    if(curr_value !== ""){ 
     var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 30; 
     new_value = "rotate(" + new_rotate + "deg)"; 

    } 
    document.getElementById('photo').style.transform = new_value; 
};

來源

2015-04-07 11:45:22 mkaminsky

轉換似乎只在點擊按鈕時旋轉圖像一次。我如何做到這一點，所以它再次旋轉爲每個額外的點擊？ – Stevo

我剛剛做了一個編輯，所以它 – mkaminsky

感謝您的幫助。我如何才能讓它旋轉在中心並保持在原來的區域？到目前爲止，它圍繞整個頁面旋轉。 – Stevo

您必須具有與IMG canvs內，然後應用旋轉畫布，或者你可以用CSS做變換：旋轉（？度）

來源

2015-04-07 11:47:12 Zivko

我喜歡畫布，但它不適用於IE 9以下的任何內容。我想至少使用IE 8，但如果不是太困難，能夠處理6-7會很好。 – Stevo

然後css3不是你的選項（瀏覽器兼容性：http：//caniuse.com/#feat=transforms2d）。也許svg，但會越來越複雜 – Zivko

我能夠做到用下面的下面的代碼實現我的目標。這並不完美，因爲我還沒有處理重疊問題，但它確實旋轉了我想要的所有圖片（在div內）。特別感謝用戶Asgu幫助我解決這個問題http://tinyurl.com/qezs3yk。您可以使用只有html和javascript的按鈕來旋轉圖片！

<html> 
    <form action="#" method="post"> 
       <input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br> 
       <input type="button" value="Show Image" id="btn1" /> 
      </form> 
     <div id="photo"></div> 
     <script> 
       document.getElementById('btn1').addEventListener('click', function(){ 
       document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image" />'; 
       }); 
      </script> 
      <button id="button">rotate</button>> 
      <script> 
       document.getElementById("button").onclick = function(){ 
        var curr_value = document.getElementById('photoimg').style.transform; 
        var new_value = "rotate(90deg)"; 
        if(curr_value !== ""){ 
        var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90; 
        new_value = "rotate(" + new_rotate + "deg)"; 
        } 
        document.getElementById('photoimg').style.transform = new_value; 
       }; 
      </script> 
    </html>

來源

2015-04-08 11:04:39 Stevo

用一個按鈕使用javascript旋轉div

回答

相關問題