如何在Javascript中旋转图像？
[英]How to rotate Image in Javascript?
问题描述
单击打开按钮时，我想旋转风扇图像。 然后点击关闭按钮，旋转停止。
我的代码是：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <img id="myFan" src="fan.png" width="200" heigh="100"><br> <button onclick="turnOn()"> On </button><br> <button onclick="turnOff()"> Off </button> <script> function turnOn() { var x = document.getElementById("myFan"); } function turnOff() { var x = document.getElementById("myFan"); } </script> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2018-07-04 07:16:07
试试这个（由于某种原因，图像没有显示出来）：
let timer; let turn = 0; function turnOn() { timer = setInterval(turnFan, 200); let x = document.getElementById("on"); x.disabled = true; } function turnOff() { clearInterval(timer); let x = document.getElementById("on"); x.disabled = false; } function turnFan() { let x = document.getElementById("myFan"); turn += 60; x.style.transform = "rotate("+ (turn % 360) +"deg)" }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <img id="myFan" src="http://www.pngmart.com/files/7/Ceiling-Fan-PNG-Transparent-Image.png" width="200" heigh="100"><br> <button id="on" onclick="turnOn()"> On </button><br> <button id="off" onclick="turnOff()"> Off </button> </body> </html>
解决方案2
1 2018-07-04 07:19:57
使用 CSS 动画和animation-play-state
您可以使用 CSS 动画轻松、连续且高效地旋转图像。 为了防止动画立即播放，您可以将animation-play-state CSS 属性设置为paused 。 当您想要播放动画时——让风扇旋转——您可以取消设置animation-play-state或将其设置为running 。
我如何使其易于访问
您可以根据图像对用户的外观（即旋转与否）设置图像上的alt属性。 要让用户知道此更改，您应该设置aria-live="polite"以便辅助技术会大声朗读替代文本。
为了使开/关按钮更易于访问，您有几个选项。 一种选择是在最后按下的按钮上设置display: none 。 另一种选择是在最后按下的按钮上将disabled设置为true 。 最后，您可以使用一个按钮来打开和关闭它，在其上设置aria-live="polite" ，并将文本从“打开风扇”更改为“关闭风扇”，反之亦然。
let fanStatus = 'off' on.addEventListener('click', () => { if (fanStatus === 'off') { rotateMe.classList.remove('paused') rotateMe.alt = 'spinning bladed fan' on.disabled = true off.disabled = false } }) off.addEventListener('click', () => { if (fanStatus === 'off') { rotateMe.classList.add('paused') rotateMe.alt = 'bladed fan' on.disabled = false off.disabled = true } })
img { width: 90px; height: 90px; } .rotate { animation: rotate 0.75s infinite linear; } .paused { animation-play-state: paused; } @keyframes rotate { 100% { transform: rotate(-360deg); } }
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScQe7tlEzE58so4n8IIn3LjKI2JCq_HIckHg&usqp=CAU" alt="bladed fan" id="rotateMe" class="rotate paused" aria-live="polite" /> <button id="on" aria-live="polite">Turn on fan</button> <button id="off" aria-live="polite" disabled>Turn off fan</button>
解决方案3
0 2019-08-14 12:37:26
我已经在我的一个项目中实现了这一点：
function rotate90 (img){
var img=this
if (img.style.transform == ""){var x=90;
window.localStorage.setItem("x", Number(x))
}
else{
var x = Number(window.localStorage.getItem("x"))
x += 90;
if (x==360){x=0}
window.localStorage.setItem("x", Number(x))
}
img.style.transform ="rotate("+x+"deg)";
}
在您的代码中使用img.onclick=rotate90; 它应该工作。
如何使用CSS或JavaScript旋转图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.