JavaScript:点击时旋转 img

新手上路,请多包涵

我正在尝试使用 onclick 事件处理程序使带有 id 图像的 img 旋转,以使用我的函数中的代码,该函数通过 ID 抓取图像并分配一个变量名,然后使用该变量名进行旋转。我不太确定我的代码哪里出错了。

    <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);
}

原文由 user2390516 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 312
2 个回答

您可以使用 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 上,只需添加类:

 function myFunction() {
  var img = document.getElementById("image");
  img.setAttribute("class", "rotated-image");
}

查看结果: http://jsbin.com/ibEmUFI/2/edit

原文由 Renato Zannon 发布,翻译遵循 CC BY-SA 3.0 许可协议

我们可以使用 rotate 来旋转。

rotate CSS 属性允许您独立于变换属性单独指定旋转变换。这可以更好地映射到典型的用户界面用法,并且不必记住要在转换属性中指定的转换函数的确切顺序。

MDN

 const rotate = () => {
  document.querySelector("p").classList.add("rotate160deg");
}
 .rotate160deg {
  rotate: 160deg;
}

// demo related stuff:
div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}
 You can do the rotation itself using CSS:
<button onclick="rotate()">rotate</button>

<div>
  <p class="rotate">😀</p>
</div>

我们使用 classList 将一个类添加到类列表中。

原文由 aloisdg 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题