我一直在尝试寻找如何使图像在第一次点击时向右旋转 90 度，并在再次点击时返回其原始方向。 我正在看另一个人在堆栈溢出时提出的这个问题，但是 this不包括再次单击时旋转回来的图像。
到目前为止，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>
最佳答案
这是运行您想要实现的目标的片段:
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() 并使用单个 = 进行比较。
您可以检查您的浏览器控制台以检查此类错误。
关于javascript - 使用javascript旋转和取消旋转图像onClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36877576/