Question

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

＆＃13;

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
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

像许多动画一样，通过扭转看似正在发生的事情来伪造这个动画要容易得多，而不是让它正常工作＆＃34;正确＆＃34;。

使用您现在拥有的代码生成结果。然后为＆＃34;旋转轮创建一个动画＆＃34;，你可以改变div，或者你可以在css中制作一个3d轮。当面部旋转时，进行一些计算以确定轮子应停在哪里以匹配您的结果。然后从那里向后工作：你想要触发你的停止＆＃34;动画，以便面部显示。您的停止动画将是预定的旋转和速度，以便可以可靠地显示面部。根据您的车轮旋转的速度，用户可能会失去跟踪，如果这是可以接受的，则触发时无关紧要，因为没有人能够看到车轮跳跃。

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

如何使用jQuery和CSS

2 个答案: