Question

我正在看这个滑块http://jsfiddle.net/sCanr/1/。

(function () {
    var $container = $('#container');
    var $slider = $('#slider');
    var sliderW2 = $slider.width()/2;
    var sliderH2 = $slider.height()/2;    
    var radius = 200;
    var deg = 0;    
    var elP = $('#container').offset();
    var elPos = { x: elP.left, y: elP.top};
    var X = 0, Y = 0;
    var mdown = false;
    $('#container')
    .mousedown(function (e) { mdown = true; })
    .mouseup(function (e) { mdown = false; })
    .mousemove(function (e) {
        if (mdown) {
           var mPos = {x: e.clientX-elPos.x, y: e.clientY-elPos.y};
           var atan = Math.atan2(mPos.x-radius, mPos.y-radius);
           deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 

           X = Math.round(radius* Math.sin(deg*Math.PI/180));    
           Y = Math.round(radius*  -Math.cos(deg*Math.PI/180));
           $slider.css({ left: X+radius-sliderW2, top: Y+radius-sliderH2 });              
           // AND FINALLY apply exact degrees to ball rotation
           $slider.css({ WebkitTransform: 'rotate(' + deg + 'deg)'});
           $slider.css({ '-moz-transform': 'rotate(' + deg + 'deg)'});
           //
           // PRINT DEGREES               
           $('#test').html('angle deg= '+deg); 
        }
    });

}）（）;

我想做什么把它变成html5视频的时间线控制。但是，我在计算这背后的数学时遇到了一些麻烦。

Answer 1

试试这个：

http://jsfiddle.net/phdphil/Zv4K7/#base

它的工作原理是保持当前位置和最后角度的全局变量（您应该更改此设置以构建具有自己状态的特定拨号）。然后，每个运动计算Δ（模360，其需要适当的模数函数）并假设＆lt; 180度是向前移动，并且> 180度（记住-1模数360是359）是负运动。然后，这会更新累计总位置：

var current = 0;
var lastAngle = 0;

           // ... inside the handler
           var delta = 0;
           var dir = 0;
           var rawDelta = mod(deg-lastAngle,360.0);
           if(rawDelta < 180) {
              dir = 1;
              delta = rawDelta;
           } else {
              dir = -1;
              delta = rawDelta-360.0;
           }
           current += delta;
           lastAngle = deg;
           $('#test').html('angle deg= '+current);  // current instead of deg

为了清楚起见，dir变量保留了此移动的方向，可用于更新＆gt;＆gt;或＆lt;＆lt;屏幕上的指示灯。

实模数函数取自this SO answer：

function mod(x,n) {
   return ((x%n)+n)%n;
}

Javascript圆形滑块度数到时间

1 个答案: