使用Javascript在单击按钮时连续旋转图像

Question

I want that the image gets rotated after every 1 sec.I have used following code but it doesn't work. 我希望图像每隔1秒旋转一次。我使用了以下代码，但是它不起作用。 My code is :- 我的代码是：-

<html>
<head>
<style>
.rotated-image 
{
 -webkit-transform: rotate(2deg);
 transform: rotate(2deg);
}
</style>
</head>
<body>
<section id="middle">

<img id="image" src="1.png" >   
<button onclick="myFunction()">Click me</button>
</section>
<script>

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

}
</script>
</body>
</html>

Answer 1

You can do it with pure CSS. 您可以使用纯CSS做到这一点。 Try this: 尝试这个：

<style>
@-webkit-keyframes animate-rotate{
    from {
         -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
    }
    to {
         -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
    }
}
@-keyframes animate-rotate{
    from {
         -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
    }
    to {
         -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
    }
}
.rotated-image 
{
    -webkit-animation: animate-rotate 180s infinite;
    animation: animate-rotate 180s infinite;
}
</style>


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

Answer 2

try with this 试试这个

var deg = 2; // starting
var rotation_diff = 30; // you can change it to 2 if you want to rotate 2 deg in each second

function myFunction() 
{
var img = document.getElementById("image");

img.style.webkitTransform = "rotate("+deg+"deg)";
img.style.transform = "rotate("+deg+"deg)";
img.style.MozTransform = "rotate("+deg+"deg)";
img.style.msTransform = "rotate("+deg+"deg)";
img.style.OTransform = "rotate("+deg+"deg)";

setTimeout("myFunction()",1000);    
deg = deg + rotation_diff;
}

see FIDDLE 见FIDDLE

UPDATE 2: 更新2：

For START and STOP 对于开始和停止

HTML HTML

<img id="image" src="http://static.kuikr.com/images/quikr_logo_f3.png" >   
<button onclick="start()">Start</button>
    <button onclick="stop()">Stop</button>

JAVASCRIPT JAVASCRIPT

var deg = 2; // starting
var rotation_diff = 30;

var rotation;

function start()
{
    rotation=1;    
    myFunction();
}

function stop()
{
    rotation=0;    
}

function myFunction() 
{
var img = document.getElementById("image");

img.style.webkitTransform = "rotate("+deg+"deg)";
img.style.transform = "rotate("+deg+"deg)";
img.style.MozTransform = "rotate("+deg+"deg)";
img.style.msTransform = "rotate("+deg+"deg)";
img.style.OTransform = "rotate("+deg+"deg)";

    if(rotation==1) {

        setTimeout("myFunction()",1000);   } 
deg = deg + rotation_diff;
}

see UPDATE FIDDLE 参见更新字段

Answer 3

 var ss = 2;


    function myFunction() {

        ss = ss + 1;
        $("#image").css({
            '-webkit-transform': 'rotate(' + ss + 'deg)',
            '-moz-transform': 'rotate(' + ss + 'deg)'
        });
        setTimeout("myFunction()", 1000);
    }

使用Javascript在单击按钮时连续旋转图像

问题描述

3 个解决方案

解决方案1
3 2014-02-17 10:47:02

解决方案2
1 2014-02-17 10:52:47

解决方案3
0 2014-02-17 10:57:12

使用Javascript在单击按钮时连续旋转图像

问题描述

3 个解决方案

解决方案1 3 2014-02-17 10:47:02

解决方案2 1 2014-02-17 10:52:47

解决方案3 0 2014-02-17 10:57:12

解决方案1
3 2014-02-17 10:47:02

解决方案2
1 2014-02-17 10:52:47

解决方案3
0 2014-02-17 10:57:12