如何使用jQuery和CSS获得老虎机效果

Question

我想做一个老虎机。 我从数组中获取随机索引，并将其填充到我的div中。 但是唯一的问题是我想拥有老虎机效果 。 我的意思是效果应该像数字从上到下下降。 到目前为止，这是我的代码。

 var results = [ 'PK12345', 'IN32983', 'IH87632', 'LK65858', 'ND82389', 'QE01233' ]; // Get a random symbol class function getRandomIndex() { return jQuery.rand(results); } (function($) { $.rand = function(arg) { if ($.isArray(arg)) { return arg[$.rand(arg.length)]; } else if (typeof arg === "number") { return Math.floor(Math.random() * arg); } else { return 4; // chosen by fair dice roll } }; })(jQuery); // Listen for "hold"-button clicks $(document).on("click", ".wheel button", function() { var button = $(this); button.toggleClass("active"); button.parent().toggleClass("hold"); button.blur(); // get rid of the focus }); $(document).on("click", "#spin", function() { // get a plain array of symbol elements var symbols = $(".wheel").not(".hold").get(); if (symbols.length === 0) { alert("All wheels are held; there's nothing to spin"); return; // stop here } var button = $(this); // get rid of the focus, and disable the button button.prop("disabled", true).blur(); // counter for the number of spins var spins = 0; // inner function to do the spinning function update() { for (var i = 0, l = symbols.length; i < l; i++) { $('.wheel').html(); $('.wheel').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" value="' + getRandomIndex() + '" /></div>'); $('.wheel').find(".new-link:last").slideDown("fast"); } if (++spins < 50) { // set a new, slightly longer interval for the next update. Makes it seem like the wheels are slowing down setTimeout(update, 10 + spins * 2); } else { // re-enable the button button.prop("disabled", false); } } // Start spinning setTimeout(update, 1); }); // set the wheels to random symbols when the page loads $(function() { $(".wheel i").each(function() { this.className = getRandomIndex(); // not using jQuery for this, since we don't need to }); }); 

 .wheel { width: 25%; float: left; font-size: 20px; text-align: center; } .wheel .fa { display: block; font-size: 4em; margin-bottom: 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <div id="wheels"> <div class="wheel clearfix"> </div> <!-- add more wheels if you want; just remember to update the width in the CSS --> </div> <p class="text-center"> <button id="spin" type="button" class="btn btn-default">Spin</button> </p> 

Answer 1

我设法通过使用prepend()而不是append()并添加了一个设定的高度并隐藏了轮子的溢出来创建了类似的效果。

CSS：

.wheel {
    ...
    height: 34.4px;
    overflow: hidden;
}

JS：

$('.wheel').prepend('<div style="display: none;" class="new-link" name="link[]"><input type="text" value="' + getRandomIndex() + '" /></div>');
//Using "first-of-type" rather than "last"
$('.wheel').find(".new-link:first-of-type").slideDown("fast");

看到它在这里工作。

Answer 2

像许多动画一样，通过反转似乎正在发生的事情来伪造此动画要容易得多，而不是使它“正确”工作要容易得多。

使用您现在拥有的代码来生成结果。 然后为“纺车”创建动画，可以对div进行洗牌，也可以在CSS中制作3d轮。 当人脸旋转时，请进行一些计算来确定砂轮应停在哪里以匹配您的结果。 然后从那里向后工作：您将希望触发“停止”动画，以便显示脸部。 您的停止动画将是预定的旋转量和速度，以便可以可靠地显示人脸。 取决于车轮旋转的速度，用户可能会迷失方向，如果可以接受，则触发时可能没有关系，因为没人会看到车轮跳动。

另一方面，模拟将使用物理模型。