如何在 Javascript 中旋转图像？

Question

我想在点击打开按钮时旋转风扇图像。然后点击关闭按钮，旋转停止。

我的代码是：

<!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>

Answer 1

试试这个（由于某种原因图像没有显示）：

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>

Answer 2

使用 CSS 动画和 `animation-play-state`

您可以使用 CSS 动画轻松、连续且高效地旋转图像。为了不让动画马上播放，可以将animation-play-stateCSS属性设置为paused。当你想让动画播放——让风扇旋转——你可以取消设置 animation-play-state 或将其设置为 running.

如何使它易于访问

您可以根据图像对用户的外观（即旋转与否）设置图像的 alt 属性。要让用户知道此更改，您应该设置 aria-live="polite" 以便辅助技术大声朗读替代文本。

为了使 on/off 按钮更易于访问，您有几个选择。一种选择是在最后按下的按钮上设置 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>

Answer 3

我已经在我的一个项目中实现了这个：

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; 它应该可以工作。

如何在 Javascript 中旋转图像？

How to rotate Image in Javascript?

javascript

image

rotation

使用 CSS 动画和 `animation-play-state`

如何使它易于访问

如何在 Javascript 中旋转图像？

How to rotate Image in Javascript?

javascript

image

rotation

使用 CSS 动画和 animation-play-state

如何使它易于访问

使用 CSS 动画和 `animation-play-state`