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

Question

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

var results = [ 
 
    'PK12345', 
 
    'IN32983', 
 
    'IH87632', 
 
    'LK65858', 
 
    'ND82389', 
 
    'QE' 
 
]; 
 

 

 

 
// 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"); 

看到它的工作here。

Answer 2

像许多动画是这个动画更容易伪造了很多通过反向什么似乎是发生的事情，而不是使其工作“正确”。

使用您现在的代码生成结果。然后为“旋转轮”创建一个动画，您可以拖动div，或者您可以在css中创建一个3d轮。在脸部旋转的同时，做一些计算来确定车轮应该停下来以匹配你的结果。然后从那里开始工作：您需要触发您的“停止”动画，以便显示脸部。您的停止动画将以预定的旋转速度和速度进行，以便可靠地显示脸部。根据车轮转速有多快，用户可能会失去追踪，如果这是可以接受的，触发时可能无关紧要，因为没有人能看到车轮跳跃。

，另一方面会使用物理模型的模拟...