用鼠标旋转轮盘

Question

我正在查看这个示例 (jsfiddle)。这几乎是我所需要的，但我需要用户用鼠标“抓住”轮盘赌，然后旋转它，就像用手处理真正的轮盘赌一样。

例如，您单击并按住滚轮，它“粘”在您的鼠标上，然后您将鼠标向左或向右移动，然后松开按钮，滚轮开始旋转直到停止。

另一个问题是，即使用户这样做，我可以选择一个预定的顺序来停止轮子吗？

这是 jsFiddle：

$(function(){

            var overWheel = false;
            var mouseDown = false;
            var lastMousePos = 0;

            $('.wheel').on('mouseover', function(){
                overWheel = true;
            }).on('mouseout', function(){
                overWheel = false;
            });


            $(document).on('mousedown', function(e){
                if(overWheel){
                    lastMousePos = e.offsetY;
                    mouseDown = true;
                }
            }).on('mouseup', function(){
                mouseDown = false;
            });


            $(document).on('mousemove', function(e){
                if(overWheel && mouseDown){
                    handleWheel(e);
                }
            });


            function handleWheel(e) {

                var yPos = e.offsetY;
                var direction = 0;

                var deg = getRotationDegrees($('.wheel'));


                if(yPos < lastMousePos){ // mouse is going up, move against the clock
                    console.log(yPos);
                    direction = -2;

                } else { //mouse is going down, move with the clock

                    direction = 2;

                }

                $('.wheel').css({'-webkit-transform': 'rotate(' + (deg + (direction)) + 'deg)'});
            }

            function getRotationDegrees(obj){
                var matrix = obj.css("-webkit-transform");
                if(matrix !== 'none') {
                    var values = matrix.split('(')[1].split(')')[0].split(',');
                    var a = values[0];
                    var b = values[1];
                    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
                } else { var angle = 0; }
                return angle;
            }

        });​

Answer 1

我已经成功地工作了。 我使用了jQuery Rotate 库。

谢谢！