用鼠標旋轉輪盤轉輪

我正在看這個例子（jsfiddle）。這幾乎是我需要的，但我需要用戶用鼠標「抓住」輪盤，然後旋轉它，就像用手做一個真正的輪子一樣。像你一樣，你點擊並按住輪子，它「粘住」你的鼠標，然後你將鼠標移到左邊或右邊，然後釋放按鈕，輪子開始旋轉直到它停止。用鼠標旋轉輪盤轉輪

另一個問題是，即使用戶正在這樣做，我可以選擇一個預定的順序來停止輪子嗎？

這是的jsfiddle：

$(function(){ 

      var overWheel = false; 
      var mouseDown = false; 
      var lastMousePos = 0; 

      $('.wheel').on('mouseover', function(){ 
       overWheel = true; 
      }).on('mouseout', function(){ 
       overWheel = false; 
      }); 


      $(document).on('mousedown', function(e){ 
       if(overWheel){ 
        lastMousePos = e.offsetY; 
        mouseDown = true; 
       } 
      }).on('mouseup', function(){ 
       mouseDown = false; 
      }); 


      $(document).on('mousemove', function(e){ 
       if(overWheel && mouseDown){ 
        handleWheel(e); 
       } 
      }); 


      function handleWheel(e) { 

       var yPos = e.offsetY; 
       var direction = 0; 

       var deg = getRotationDegrees($('.wheel')); 


       if(yPos < lastMousePos){ // mouse is going up, move against the clock 
        console.log(yPos); 
        direction = -2; 

       } else { //mouse is going down, move with the clock 

        direction = 2; 

       } 

       $('.wheel').css({'-webkit-transform': 'rotate(' + (deg + (direction)) + 'deg)'}); 
      } 

      function getRotationDegrees(obj){ 
       var matrix = obj.css("-webkit-transform"); 
       if(matrix !== 'none') { 
        var values = matrix.split('(')[1].split(')')[0].split(','); 
        var a = values[0]; 
        var b = values[1]; 
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 
       } else { var angle = 0; } 
       return angle; 
      } 

     });

來源

2012-10-30 efdutra

這需要一些不可忽略的物理。到目前爲止，爲了增加物理效率，你做了什麼？ –

什麼都沒有..我嘗試了一些更多的工作在這個例子上，但沒有任何作品....我很絕望...... =/ – efdutra

我已經成功地工作。我使用了jQuery Rotate庫。

謝謝！

來源

2012-11-13 20:06:50 efdutra

你有沒有你做過的一個例子？我試圖做一些非常相似的事情 – RooWM

@efdutra我第二 - 如果你能展示最後作品的小提琴會很棒。 –

用鼠標旋轉輪盤轉輪

回答

相關問題