在jQuery/JS中旋轉時觸發事件的旋鈕

Question

我正在嘗試創建一些可在老式電視和收音機中找到的交互式旋鈕。我正在使用KnobKnob.js來允許用戶旋轉。它有時表現得很奇怪，但由於缺少可用於此特定需求的插件以及缺乏時間，我決定無論如何都要放棄它。

我想什麼做的是改變取決於旋鈕，或<div id="centralKnob">在我的代碼的矩形部分的旋轉角度的視頻源，複製一個頻道旋鈕的行爲。用戶也應該能夠點擊周圍的鏈接來做到這一點。

所以，我認爲這樣做是改變基於旋鈕的當前旋轉角度源的最佳途徑。由於我對JS/jQuery非常陌生，我不知道如何獲得元素的角度，所以我環顧四周，發現了this article。他們做什麼：

var el = document.getElementById("centralKnob"); 

var st = window.getComputedStyle(el, null); 

var tr = st.getPropertyValue("-webkit-transform") || 
     st.getPropertyValue("-moz-transform") || 
     st.getPropertyValue("-ms-transform") || 
     st.getPropertyValue("-o-transform") || 
     st.getPropertyValue("transform") || 
     "Either no transform set, or browser doesn't do getComputedStyle"; 

var values = tr.split('(')[1]; 
values = values.split(')')[0]; 
values = values.split(','); 

var values = tr.split('(')[1]; 
whatever = tr.split(')')[0]; 
whatever = tr.split(','); 

var a = values[0]; 
var b = values[1]; 
var c = values[2]; 
var d = values[3]; 


var angle = Math.round(Math.asin(b) * (180/Math.PI)); 

這應該給出旋鈕的當前角度。 但是我該如何做到這一點，以便每當用戶改變角度時就重新計算角度，並且只要旋鈕位於X（deg）和Y（deg）之間，視頻源就會改變？

在此先感謝。我也歡迎任何有關如何使整個工作更好地工作的建議或建議，特別是如何讓用戶順利地旋轉旋鈕。另外，我知道旋轉撥號和旋鈕在網頁設計中不是一個好主意，也不是用鼠標控制的最佳方式，但這比實際的公共網站更具技術挑戰性。

Answer 1

我在過去做過這樣的事情。

http://jsfiddle.net/gTDdp/16/

（有一些調整，應該是可能的，創建一個旋轉的旋鈕。） 我加觸摸事件來爲移動設備

var dragging = false 

    $(function() { 
     init(); 
     var target = $('#target') 
     var offset_x = -256; 
     var offset_y = 356; 
     var angle = 0; 
     var startAngle; 
     var slices = 8; 
     var sliceAngle = 360/slices; 
     target.mousedown(function(e) { 
      var mouse_x = e.pageX; 
      var mouse_y = e.pageY; 
      var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y); 
      dragging = true 
      startAngle = ((radians * (180/Math.PI) * -1) + 90) - angle; 
     }) 
     $(document).mouseup(function() { 
      dragging = false; 
      var slice = (angle + (sliceAngle/2))/sliceAngle; 
      if(slice < 0){ 
       slice = 12 + slice; 
      }else if(slice > 12){ 
       slice = 12 - slice; 
      } 

      // Move circle in perfect position 
      angle = (Math.floor(slice) * (360/slices)); 
      target.css('-moz-transform', 'rotate(' + angle + 'deg)'); 
      target.css('-moz-transform-origin', '50% 50%'); 
      target.css('-webkit-transform', 'rotate(' + angle + 'deg)'); 
      target.css('-webkit-transform-origin', '50%, 50%'); 
      target.css('-o-transform', 'rotate(' + angle + 'deg)'); 
      target.css('-o-transform-origin', '50% 50%'); 
      target.css('-ms-transform', 'rotate(' + angle + 'deg)'); 
      target.css('-ms-transform-origin', '50% 50%'); 

      alert(Math.floor(slice)); 
     }) 
     $(document).mousemove(function(e) { 
      if (dragging) { 
       var mouse_x = e.pageX; 
       var mouse_y = e.pageY; 
       var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y); 
       var degree = (radians * (180/Math.PI) * -1) + 90; 
       angle = degree - startAngle; 
       if(angle < 0){ 
        angle = 360 + angle; 
       }else if(angle > 360){ 
        angle = 360 - angle; 
       } 
       target.css('-moz-transform', 'rotate(' + angle + 'deg)'); 
       target.css('-moz-transform-origin', '50% 50%'); 
       target.css('-webkit-transform', 'rotate(' + angle + 'deg)'); 
       target.css('-webkit-transform-origin', '50%, 50%'); 
       target.css('-o-transform', 'rotate(' + angle + 'deg)'); 
       target.css('-o-transform-origin', '50% 50%'); 
       target.css('-ms-transform', 'rotate(' + angle + 'deg)'); 
       target.css('-ms-transform-origin', '50% 50%'); 
      } 
     }) 
    }) 


    function touchHandler(event) 
    { 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 

     switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type="mousemove"; break;   
     case "touchend": type="mouseup"; break; 
     default: return; 
    }   
    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
         first.screenX, first.screenY, 
         first.clientX, first.clientY, false, 
         false, false, false, 0/*left*/, null); 

    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
    } 

    function init() 
    { 
     document.addEventListener("touchstart", touchHandler, true); 
     document.addEventListener("touchmove", touchHandler, true); 
     document.addEventListener("touchend", touchHandler, true); 
     document.addEventListener("touchcancel", touchHandler, true);  
    }