使用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在按鈕單擊時連續旋轉圖像

回答

相關問題