旋转和取消旋转图像单击与 javascript

Rotate and unrotate an image onClick with javascript

本文关键字：旋转 javascript 单击 图像 取消      更新时间：2023-09-26

我一直在尝试找到如何使图像在第一次单击时向右旋转 90 度，当再次单击时，返回到其原始方向。我正在查看另一个人在堆栈溢出上提出的这个问题，但这不包括再次单击时向后旋转的图像。

到目前为止，CSS 已经显示出潜力，但我似乎无法在第二次单击时将图像旋转回去。

如果您需要参考，这是图像：图像

这是我的脚本：

<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="https://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>
    </body>
</html>

下面是运行您尝试实现的目标的片段： 

function Rotate() {
		var element = document.getElementById('image');
		if (element.className === "normal") {
			element.className = "rotate";
		}
		else if ( element.className === "rotate") {
			element.className = 'normal';
		}
	}
.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="https://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>
</body>
</html>

请记住，您的代码上有几个语法错误，例如：document.getElementById（） 并使用单个 = 进行比较。

您可以检查浏览器控制台以检查此类错误。

你的脚本中有很多错误 首先：你在脚本的许多部分重新声明旋转，第二：内 如果你必须与==而不是=进行比较，最后一个是分配一个值，第三个：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>

除了Jose Rojas提出的建议外，我还找到了一种通过修改本网站建议的页面上的某些脚本来重置方向的方法。您可以在此处查看。我将为其他角度修改CSS脚本，以便该过程可以永远持续下去。

相关文章：