2013-05-02 169 views
1

所以我有代碼,當點擊「+10」按鈕10degree旋轉到對象,當點擊「+30」按鈕30degree旋轉到對象,90degree位置是最大可用時應該添加。現在只有一個廣告,我不知道如何讓它移動到我想移動的程度。旋轉物體onclick

http://jsfiddle.net/9Xghf/

var rotateObject = document.getElementById("object"); 
var objectRotation = 0; 

var add10 = document.getElementById("add10"); 
var add30 = document.getElementById("add30"); 

add10.onclick = function(){ 
    rotate(0, 10); 
} 
add30.onclick = function(){ 
    rotate(0, 30); 
} 
function rotate(index, limit){ 
    if(objectRotation < 90 && index <= limit){ 
     index++; 
     objectRotation++; 
     rotateObject.style.transform="rotate(" + objectRotation + "deg)"; 
     rotateObject.style.WebkitTransform="rotate(" + objectRotation + "deg)"; 
     rotateObject.style.msTransform="rotate(" + objectRotation + "deg)"; 
     setTimeout(rotate, 50); 
    }else{ 
    // 90 degree is the max limit for this object 
    } 
} 

回答

2

該更換計時器:

setTimeout(function(){ 
     rotate(index,limit); 
    }, 50); 

注意:這不會對所有的瀏覽器

+0

謝謝:)它的工作原理工作,任何想法如何,我可以完全支持瀏覽器嗎? – Driglou 2013-05-02 18:05:25

+0

我會推薦使用'1000/60'作爲超時時間而不是'50'來實現每秒60幀的漂亮和流暢。 – howderek 2013-05-02 18:06:44

+0

看看這裏,它可能會給你一些指示:http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/ – nicolas 2013-05-02 18:12:20