JavaScript:点击时旋转图片

JavaScript: Rotate img on click(JavaScript:点击时旋转图片)

问题描述

我正在尝试使用 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:点击时旋转图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！