Question

我正在尝试使用带有js的onclick函数旋转div但是当我单击我的按钮时没有任何反应。有什么建议？我希望能够继续单击按钮进行90度旋转，而不仅仅是一次。

<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>

Answer 1

我可以使用下面的代码实现我的目标。它不完美，因为我还没有处理重叠的问题，但它确实旋转了图片（在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>

Answer 2

除非您使用<canvas>，否则您只能使用javascript执行此操作。你必须像这样设置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>

JS

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; };

Answer 3

你必须有内置img的canvs然后将旋转应用于画布，或者你可以使用CSS变换：rotate（？deg）

使用javascript按钮旋转div

3 个答案: