Question

我希望有一个图像或DIV开始旋转，点击类似于唱机。是否有可能让它流畅并使用javascript？

非常感谢你提前！：）

Answer 1

在谷歌上搜索

滚筒滚动

应该给你一个想法：）

https://www.google.co.in/search?q=Do+a+barrel+roll

Answer 2

您需要使用window.setInterval来控制动画。更多信息here

Answer 3

你必须在CSS3中进行旋转。

@keyframes rotate
{
     0%   { transform: rotate(0); }
     25%  { transform: rotate(90); }
     50%  { transform: rotate(180); }
     75%  { transform: rotate(270); }
     100% { transform: rotate(360); }
}

#rotating_div
{
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

这是JavaScript：

function rotate(id) {
    div = getElementById['id'];
    div.style.animation-play-state = running;
}

这是HTML：

<div id="rotating_div" onclick="rotate("rotating_div")"></div>

使用前缀-moz-和-webkit-来使CSS3在FF和其他浏览器中工作。看看这里：W3Schools.com

祝你好运！：）

Answer 4

我的第一个想法是选择JS Timers和CSS3 Transitions的组合，但是看看w3schools.com，我看到CSS3中实际上有动画支持。

我认为这将实现如下;

@keyframes rotate
{
     0%   { transform: rotate(0); }
     25%  { transform: rotate(90); }
     50%  { transform: rotate(180); }
     75%  { transform: rotate(270); }
     100% { transform: rotate(360); }
}

div #lp
{
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

这不是一个真正的JS解决方案，但这是迄今为止最简单的解决方案，但如果你的目标浏览器不支持CSS3，那么你可能想要使用动画GIF图像。

你必须让它在其他web浏览器中工作，但它只是添加-webkit-标签等，有关该主题的更多信息可在此处找到：http://www.w3schools.com/css3/css3_animations.asp和此处：{{3} }

（对不喜欢w3schools.com的人抱歉）

是否可以有一个恒定的旋转DIV或图像？

4 个答案: