logo标签列表

如何在Javascript中旋转图像？

javascriptimagerotation
5
我希望在点击“打开”按钮时旋转风扇图像。当点击“关闭”按钮时，旋转停止。
我的代码如下： 

<!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
欢迎来到 StackOverflow！您已经尝试过什么了吗？请更新您的问题，展示出您已经尝试过的内容，并在一个最小化、完整和可验证的示例中展示您正在面临的具体问题。如需进一步了解，请参阅如何提问好问题，并进行本站的导览。 - palaѕн
你需要以动画形式进行旋转吗？ - user1531038
是的。像真正的粉丝一样。 - B.Sung
使用CSS动画将是实现您目标的一个很好的开端。如果需要，网上会有很多答案可供参考。 - mitchken
3个回答
5

尝试这个（出于某种原因，图像没有显示出来）：

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>

谢谢！你帮了我很多。 - B.Sung
没问题。您可以采纳我的答案吗？即绿色勾选标记。 - Suhas
2

我在我的一个项目中实现了这个功能：

最初的回答：

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;，它应该能够起作用。最初的回答。
1

使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接