javascript - 改进现有水平滚动条 "Roulette"

Question

我创建了一个水平滚动条的原型(prototype)，它将以动画方式选出获胜者。我希望通过以编程方式突出显示指示器下选定的图像来改进这一点。我已经弄清楚如何让它滚动到我想要的位置，但我无法弄清楚如何在赢得图像后以编程方式选择图像。

当前使用:

• HTML
• CSS
• jQuery
• GSAP 时间线最大

工作示例:http://codepen.io/ByteKnight13/pen/950a1a0d277fc0204d1827120bdcc090/

当前代码:

if (!String.prototype.format) {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined'
                ? args[number]
                : match;
        });
    };
}
$(window).load(function () {
    console.log('Window loaded!');

    var $roulette = $('#roulette-images-list');
    $roulette.html(generateRouletteImages(200));

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function getPositionOfWinner(winner) {
        var widthOfImg = $('#roulette-img0').width();
        var minDistanceToEdgeAllowed = 4;

        var desiredImg = $('#roulette-img' + winner.toString());

        var minPos = desiredImg.position().left + minDistanceToEdgeAllowed;
        var maxPos = desiredImg.position().left + widthOfImg - minDistanceToEdgeAllowed;

        console.log('Position.Left: {0} | Offset().left: {1}'.format(desiredImg.position().left, desiredImg.offset().left));
        return getRandomInt(minPos, maxPos);
    }

    function printLeftOfRouletteSpinner() {
        var pos = $('#roulette-images-list').position().left;
        if (pos % 100 == 0) console.log(pos);
    }

    function rouletteSpin(destImg) {
        if (!destImg) destImg = 40;
        var tl = new TimelineMax({onUpdate: printLeftOfRouletteSpinner}),
            rouletteImages = $('#roulette-images-list'),
            startLeft = rouletteImages.position().left;

        tl//.to(rouletteImages, 0, {x: 5000})
            .to(rouletteImages, 10, {x: getPositionOfWinner(destImg) * -1, ease:Power4.easeOut})
            .to(rouletteImages, 0, {x: 0}, 11);
    }

    $('#spin').click(function () {
        var winner = $('#winner-text').val();
        //if (isNaN(winner) || winner > 49) alert('Enter 0 through 49');
        rouletteSpin(winner);
    });

    function getRandomColor() {
        return ((1 << 24) * Math.random() | 0).toString(16)
    }

    function generateRouletteImages(howMany) {
        var imgTemplate = '<img src="{0}" class="{1}" id="roulette-img{2}">';
        var imgClass = 'roulette-img';
        var imgSrcTemplate = 'http://placehold.it/{0}/{1}?text={2}';

        var completedRouletteImages = [];
        for (var i = 0; i < howMany; i++) {
            var color = getRandomColor();
            var imgSrc = imgSrcTemplate.format('80', color, i);
            var completedTemplate = imgTemplate.format(imgSrc, imgClass, i);
            completedRouletteImages.push('<li>' + completedTemplate + '</li>');
        }
        return completedRouletteImages;
    }
});

Answer 1

TimelineMax 上有一个 onComplete 参数。将其与 onCompleteParams 参数相结合，您可以将获胜者图像引用传递给 onComplete 回调。

new TimelineMax({     onComplete: timelineFinished,      onCompleteParams: [ destImg ]})

function timelineFinished(destImg){    // this is where you highlight your winner    $('#roulette-img' + destImg).css({      border: '3px solid red'    });  }

此外，轮盘在完成旋转后会重置，因此我删除了最后一个:.to(rouletteImages, 0, {x: 0}, 11)

这是一个相当粗略的选择，但您可以使用一些 CSS 或任何您想要实现的目标来清理它。

工作示例: http://codepen.io/kingkode/pen/EyKwJW