Question

我正在尝试创建一些交互式旋钮，就像您在老式电视和收音机中找到的旋钮一样。我正在使用KnobKnob.js来允许用户旋转。它有时表现得很奇怪，但由于缺乏可用于这种特殊需求的插件和我没有时间，我还是决定试一试。

我想要做的是根据旋钮矩形部分的旋转角度或我的代码中的<div id="centralKnob">更改视频来源，以便复制Channels旋钮的行为。用户还应该只需单击周围的链接即可。

enter image description here

所以，我认为最好的方法是根据旋钮的当前旋转角度更改光源。由于我是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（度）和Y（度）之间，视频源就会发生变化？

提前致谢。我也欢迎任何有关如何使整个工作更好的建议或建议，特别是如何让用户顺利旋转旋钮。此外，我知道旋转拨号盘和旋钮在网页设计中不是一个好主意，并不是用鼠标控制的最好的东西，但这比实际的公共网站更具技术挑战。

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

旋转旋钮，在jQuery / JS中旋转时触发事件

1 个答案: