jQuery 旋转函数 - 在图像单击时指定 20% 的旋转

jQuery spin function - specify 20% spin upon image click?

本文关键字：旋转 图像 函数 jQuery 单击      更新时间：2023-09-26

我是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();
});//]]>

感谢您的任何指示！

我查看了您的代码，发现您正在使用 transit.js 来执行旋转动画。 本质上，对象的css（变换"旋转"）在一定时间内更新（如jQuery的animate）。

您可以使用向右旋转和向左旋转函数（或您喜欢的任何名称）扩展命运之轮对象，您可以将其绑定到您将创建的键/按钮。 您的代码如下所示：

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()

注意：73度看起来大约是1个部分的数量，但你可能不得不玩弄这些数字。 您可能还希望缓存对象中的度数。 您可能还需要找到一种方法，使每次按下按钮时都集中在每个部分。

干杯！

相关文章：