javascript - jQuery 旋转函数 - 在图像点击时指定 20% 旋转？

Question

我是一个 jQuery 新手 - 但我设法修改了一个轮盘赌脚本，为我正在处理的主页旋转一个“饼图”图像。

效果很好 - 但客户还想在任一侧添加一个箭头，点击后将饼图推进一个部分 - 所以顺时针方向是一个箭头，逆时针方向是另一个。

有没有办法指定部分旋转？

非常感谢任何指导!我正努力 catch 一个荒谬的截止日期，并且正在为此苦苦挣扎。

页面如下: http://bluetabby.com/rr/index13.html

到目前为止，这是 jQuery 代码 - 我需要弄清楚的函数是 leftArrow 和 rightArrow:

$( document ).ready(function() {
        window.WHEELOFFORTUNE = {

            cache: {},

            init: function () {
                console.log('controller init...');

                var _this = this;
                this.cache.wheel = $('.wheel');
                this.cache.wheelSpinBtn = $('.wheel');
                this.cache.leftArrow = $('.leftarrow');
                this.cache.rightArrow = $('.rightarrow');

                //mapping is backwards as wheel spins clockwise //1=win
                this.cache.wheelMapping = ['Mitzvahs','Galas','Florals','Props','Weddings'].reverse();
                this.cache.wheelSpinBtn.on('load', function (e) {
                    e.preventDefault();
                     if (!$(this).hasClass('disabled')) _this.spin();
                });
                this.cache.rightArrow.on('click', function (e) {
                    e.preventDefault();
                    if (!$(this).hasClass('disabled')) _this.spin();
                });


            },

            spin: function () {
                console.log('spinning wheel');

                var _this = this;



                //disable spin button while in progress
                this.cache.wheelSpinBtn.addClass('disabled');

                /*
                    Wheel has 10 sections.
                    Each section is 360/10 = 36deg.
                */
                var deg = 1000 + Math.round(Math.random() * 1000),
                    duration = 6000; //optimal 6 secs

                _this.cache.wheelPos = deg;

                //transition queuing
                //ff bug with easeOutBack
                this.cache.wheel.transition({
                    rotate: '0deg'
                }, 0).delay(1000)
                    .transition({
                    rotate: deg + 'deg'
                }, duration, 'easeOutCubic');

                //move marker
                _this.cache.wheelMarker.transition({
                    rotate: '-20deg'
                }, 0, 'snap');

                //just before wheel finish
                setTimeout(function () {
                    //reset marker
                    _this.cache.wheelMarker.transition({
                        rotate: '0deg'
                    }, 300, 'easeOutQuad');
                }, duration - 500);

                //wheel finish
                setTimeout(function () {
                    // did it win??!?!?!
                    var spin = _this.cache.wheelPos,
                        degrees = spin % 360,
                        percent = (degrees / 360) * 100,
                        segment = Math.ceil((percent / 5)),  //divided by number of segments
                        win = _this.cache.wheelMapping[segment - 1]; //zero based array

                    console.log('spin = ' + spin);
                    console.log('degrees = ' + degrees);
                    console.log('percent = ' + percent);
                    console.log('segment = ' + segment);
                    console.log('win = ' + win);


                    //re-enable wheel spin
                    _this.cache.wheelSpinBtn.removeClass('disabled');

                }, duration);

            },

            resetSpin: function () {
                this.cache.wheel.transition({
                    rotate: '0deg'
                }, 0);
                this.cache.wheelPos = 0;
            }

        }

        window.WHEELOFFORTUNE.init();
});//]]> 

谢谢指点!

Answer 1

我查看了您的代码，发现您正在使用 transit.js 制作旋转动画。本质上，对象的 css(转换“旋转”)会在一定时间内更新(就像 jQuery 的 animate)。

您可以使用 spinright 和 spinleft 函数(或您喜欢的任何名称)扩展您的命运之轮对象，您可以将它们绑定(bind)到您将创建的键/按钮。您的代码看起来像这样:

WHEELOFFORTUNE.spinright = function() { 

  // get current degree of wheel and convert to integer
  var degree = parseInt( this.cache.wheel.css('rotate'), 10 );  
  this.cache.wheel.transition( { "rotate": (degree + 73) + "deg" },1000 );
}

WHEELOFFORTUNE.spinleft = function() { 
  var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
  this.cache.wheel.transition( { "rotate": (degree - 73) + "deg" },1000 );
}

然后你可以将这些函数绑定(bind)到按钮或直接在控制台调用函数:

WHEELOFFORTUNE.spinright()
WHEELOFFORTUNE.spinleft()

注意:73deg 看起来大约是 1 个部分的数量，但您可能需要考虑这些数字。您可能还想在对象中缓存度数。您可能还需要想出一种方法，使每次按下按钮时每个部分都居中。

干杯!