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

我希望图像在每1秒后旋转。我使用了下面的代码，但它不起作用。我的代码是： -使用JavaScript在按钮单击时连续旋转图像

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

来源

2014-02-17 user3298056

你检查我的答案吗？尝试一次 –

你可以用纯CSS做到。试试这个：

<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"); 
}

来源

2014-02-17 10:47:02 kamilkp

720s？ 12分钟？ :) – dfsq

我编辑它到180s。 OP需要每1秒2度，因此360度需要持续180秒。无论如何调整动画的持续时间应该是相当简单的:) – kamilkp

现在我想停止点击另一个按钮时的旋转。那么我该怎么做？ – user3298056

尝试用这种

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; 
}

看到FIDDLE

更新2：

启动和停止

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

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; 
}

看到UPDATE FIDDLE

来源

2014-02-17 10:52:47

旋转（“+ deg +”度），为什么deg使用两次？ – user3298056

它的第一个'deg'是一个变量，每次调用myFunction时第二个是字符串（用于旋转的css后缀）。你看过小提琴吗？ –

它正在工作。非常感谢。 – user3298056

var ss = 2; 


    function myFunction() { 

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

来源

2014-02-17 10:57:12 social

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

回答

相关问题