JavaScript:点击时旋转img [英] JavaScript: Rotate img on click
本文介绍了JavaScript:点击时旋转img的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用onclick事件处理程序使用id图像旋转img来使用我的函数中的代码,该函数通过ID获取图像来分配变量名称,然后使用变量名称进行旋转。我不确定我的代码在哪里出错。
I'm trying to make the img with the id image rotate using the onclick event handler to use the code in my function which grabs the image by ID assigns a variable name, then uses the variable name to rotate. I'm not really sure where i when wrong in my code.
<section id="middle">
<img id="image" src="images/flower.png" >
<button onclick="myFunction()">Click me</button>
</section>
MyFunction(){
var img = document.getElementById("image");
img.rotate(20*Math.PI/180);
}
推荐答案
你可以自行完成轮换使用CSS:
You can do the rotation itself using CSS:
.rotated-image {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
在html上:
<section id="middle">
<img id="image" src="images/flower.png" >
<button onclick="myFunction()">Click me</button>
</section>
然后,在javascript上,只需添加课程:
And then, on the javascript, just add the class:
function myFunction() {
var img = document.getElementById("image");
img.setAttribute("class", "rotated-image");
}
查看结果: http://jsbin.com/ibEmUFI/2/edit
这篇关于JavaScript:点击时旋转img的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文