如何使用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輪。在臉部旋轉的同時，做一些計算來確定車輪應該停下來以匹配你的結果。然後從那裏開始工作：您需要觸發您的「停止」動畫，以便顯示臉部。您的停止動畫將以預定的旋轉速度和速度進行，以便可靠地顯示臉部。根據車輪轉速有多快，用戶可能會失去追蹤，如果這是可以接受的，觸發時可能無關緊要，因爲沒有人能看到車輪跳躍。

，另一方面會使用物理模型的模擬...