JQuery-順時針旋轉div並逆時針旋轉

我發現瞭如何使用JQuery旋轉div的鏈接。JQuery-順時針旋轉div並逆時針旋轉

Rotating a Div Element in jQuery以及其他一些文章。

的代碼如下

$(function() { 
      var $elie = $("#wheel"); 
      rotate(0); 
      function rotate(degree) { 

       // For webkit browsers: e.g. Chrome 
       $elie.css({ 
        WebkitTransform : 'rotate(' + degree + 'deg)' 
       }); 
       // For Mozilla browser: e.g. Firefox 
       $elie.css({ 
        '-moz-transform' : 'rotate(' + degree + 'deg)' 
       }); 
       $elie.css({ 
        '-ms-transform' : 'rotate(' + degree + 'deg)' 
       }); 

       // Animate rotation with a recursive call 
       setTimeout(function() { 
        rotate(++degree); 
       }, 5); 
      } 

     });

可能有人請幫我把這個代碼擴展到一個元素順時針和逆時針像方向盤隨機旋轉

來源

2013-05-09 Mr.Zero to Hero

您需要的程度使用的Math.random，使其可以選擇負面或正面。 – Cam 2013-05-09 15:01:32

可以延長jQuery.animate（）來創建這樣的jsfiddle

$.fx.step['degree']=function(fx){ 
if(! fx.deg){ 
    fx.deg=0; 
    if($(fx.elem).data("degree")){ 
     fx.deg=$(fx.elem).data("degree") 
    } 
} 
$(fx.elem).css({"WebkitTransform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)"}); 
$(fx.elem).data("degree",Math.floor(fx.deg+(fx.end*fx.pos))); }

來源

2013-05-09 15:39:27

哇這真棒...謝謝先生！ – 2013-05-09 15:58:44

不客氣，你可以改變它的工作沒有.data（）但CSS轉換看起來像變換：矩陣（1.0,2.0,3.0,4.0,5.0,6.0） – 2013-05-09 16:06:15

輝煌的代碼，謝謝你非常 – 2013-10-03 18:40:03

你只需要改變裏面的代碼的setTimeout使遞增/遞減隨機

// Animate rotation with a recursive call 
       setTimeout(function() { 
        increment= Math.random() < 0.5 ? -1 : 1; 
        degree+=increment; 
        rotate(degree); 
       }, 5);

或

increment = Math.floor(Math.random()*3)-1;

爲1,0,1運動

來源

2013-05-09 15:03:15 Borgtex

謝謝你的回答:) – 2013-05-09 16:12:37

JQuery-順時針旋轉div並逆時針旋轉

回答

相關問題