Question

我是一个jQuery新手 - 但已设法修改轮盘赌脚本以旋转我正在制作的主页的“饼图”。

效果很好 - 但客户还希望在任一侧添加一个箭头，以便在点击时将饼图前进一个部分 - 顺时针旋转一个箭头，逆时针旋转另一个箭头。

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

非常感谢任何指导！我正试图遇到一个荒谬的截止日期，并且正在努力解决这个问题。

这是页面： 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（转换＆＃34;旋转＆＃34;）正在更新一段时间（如jQuery的动画）。

您可以使用旋转和旋转功能（或您喜欢的任何名称）扩展您的幸运物品轮，您可以将其绑定到您将要创建的按键/按钮。您的代码看起来像这样：

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

然后，您可以将这些函数绑定到按钮或直接在控制台中调用函数：

WHEELOFFORTUNE.spinright()
WHEELOFFORTUNE.spinleft()

注意：73deg看起来与1节的数量有关，但你可能不得不玩这些数字。您可能还想在对象中缓存度数。您可能还需要找到一种方法，以按下每个按钮的每个部分为中心。

干杯！

jQuery旋转功能 - 指定图像点击20％旋转？

1 个答案: