JavaScript pictureChange() 和旋转

Question

我已经在互联网上搜索了几个小时来解决我的问题，但我仍然找不到解决方案。我是 JS 的新手，所以我很兴奋，但在编写代码时仍然遇到一些问题。我想做的是，onClick，在旋转图片的同时将图片换成另一张。我有我的效果的第一部分（它只工作一次，然后图像停止旋转），但我想再次将它旋转 180 度并用第一张图像改变它。我的想法是做一个有 3 个栏的菜单，比如 google 栏，点击时变成 "X"，反之亦然。这是脚本的第一部分，

var img = document.querySelector('.navicon');

img.addEventListener('click', onClick, false);

function onClick() {
var deg = 180 ;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
    'style', css  );

}
 function pictureChange()
{
document.getElementById("navicon").src="images/buttons/xbutton.png";

}

这是CSS

.navicon:hover {
opacity:0.7;
}
.navicon {
margin-top: 25px;
margin-left:-75px;
position:relative;
display:block;
left:50%;
width: 45px;
height:45px;
left:500px; 
opacity: 1;
-webkit-transition: -webkit-transform 0.1s ease-out;
}

这是 HTML

<img src="images/buttons/navicon.png" class="navicon rotation"
    style="border=0;" id="navicon" onclick="pictureChange()">

我想过添加一个新的 class 并调用一个只适用于这个新函数的函数，但它似乎不起作用... 感谢帮助

Answer 1

我个人尽量避免在 javascript 中设置 css。更好的方法是使用 javascript 添加和删除类，并让 css 处理实际的转换。在这种情况下，你可以有一些像这样的 css：

.rotate {
  -webkit-transform: rotate(180deg);
}

并在您的 onClick 函数中包含以下行：

this.classList.toggleClass('rotate')

要来回更改图像源，创建保存源的变量（或数组），并在 onClick 函数中更改它们。无需在 html.

中设置 onclick="pictureChange()"

Answer 2

谢谢！它就像一个魅力！我已经使用 onClick="changeImage" 调用的 changeImage 来完成动画！这是我的最终代码 var newimage = "xbutton.png";

function changeImage() {
if ( newimage == "navicon.png" ) {
document.images["navicon"].src = "images/buttons/navicon.png";
document.images["navicon"].alt = "navicon";
newimage  = "xbutton.png";    }
else {
 document.images["navicon"].src = "images/buttons/xbutton.png";
document.images["navicon"].alt = "Earth";
newimage  = "navicon.png";   }
}

再次感谢您的建议

JavaScript pictureChange() 和旋转

JavaScript pictureChange() and rotation

html

javascript

css

jquery

rotation