0

私はこの例を見ています( jsfiddle )。それはほとんど私が必要とするものですが、ユーザーがマウスでルーレットを「つかみ」、実際の手で行うのと同じように回転させる必要があります。

同様に、ホイールをクリックしたままにすると、ホイールがマウスに「くっつき」、マウスを左または右に動かしてボタンを放すと、ホイールが停止するまで回転し始めます。

もう 1 つの質問は、ユーザーがそうしている場合でも、ホイール ストップに対してあらかじめ決められた順序を選択することはできますか?

これは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;
            }

        });​
4

1 に答える 1

-1

私は仕事をすることができました。jQuery Rotateライブラリを使用しました。

ありがとう！

于 2012-11-13T20:06:50.523 に答える