jQuery/JS에서 회전 할 때 이벤트를 트리거하는 회전식 노브

Question

빈티지 TV 및 라디오에서 볼 수있는 대화식 회전식 노브를 만들려고합니다. 사용자가 회전 할 수 있도록 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/

(일부는 가능해야한다 조정으로 회전 노브를 만들 수 있습니다.) 내가 모바일 장치에 당신은 그가이 모든 일 didn를 않았다

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