在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);  
    }