使用javascript旋转和取消旋转图像onClick

debugcn 发表于 Dev

用户6258774

我一直在尝试寻找如何使图像在第一次单击时向右旋转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="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

    </body>
</html>

迭戈·丰特内尔（Diego Fontenelle）

这是运行您要实现的目标的代码段：

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

</body>
</html>

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。