Question

我正在制作像赌场轮盘赌这样的旋转木马，但是当我制作动画时，我无法找到知道哪个div编号的方法。当我制作动画循环时，我试图按距离计算，但我没有工作

这是我的例子

https://codepen.io/anon/pen/xXbpJr?page=1&

    var giftamount = 10;
var gw = $('.gift').outerWidth(true);
var giftcenter = gw/2;
var cycle = 7;

var containercenter = $('.boxwrapper').outerWidth(true)/2;
for(var i = 0; i <=5; i++)
{
  var giftduplicate = $('.giftwrapper').children().clone(true,true);
   $('.giftwrapper').append(giftduplicate);   
}    

$('.button').click(function(){
  var btn = $(this);
  btn.hide();
  var randomgift = Math.floor((Math.random() * 10) + 1);
  var distance = giftamount * gw * cycle + containercenter + (randomgift*gw) - giftcenter;

  console.log(distance);

  $( ".giftwrapper" ).css({left: "0"});

  $('.giftwrapper').animate({left: "-="+distance},10000,function(){
    alert('You Won Gift' + randomgift); 
    btn.show();                  
   });
});

我得到错误的div数，我尝试了很多组合，但它没有工作

Answer 1

如果您想获得指针下方的奖品（垂直红色条），您实际上不必计算距离。相反，您可以使用一个非常方便但鲜为人知的DOM API方法elementFromPoint(x, y)，您可以在其中获取对x，y坐标下的最顶层 DOM节点的引用。页面。

为了实现这一点，x和y必须与指针的视觉中心相对应，我们可以使用以下方式简单地计算：< / p>

var $pointer = $('.rafflebox .pointer');
var pointerX = $pointer.offset().left + $pointer.width() * 0.5;
var pointerY = $pointer.offset().top + $pointer.height() * 0.5;

在jQuery的动画回调中，您只需检索此坐标下方的元素（即奖品）：

// Hide pointer first, otherwise it will be returned as the topmost element $pointer.hide(); // Get element from pointer's visual center var prize = document.elementFromPoint(pointerX, pointerY); // Show it again $pointer.show();

现在您拥有对DOM节点的正确引用，您可以自行决定要在＆＃34;奖品中存储哪种元数据。 DOM节点。例如，您可以在HAML中嵌入HTML5数据属性：

%img{:src => "http://placehold.it/125x125?text=Prize+#{i}", :data => {:prize => "Prize #{i}"}}

...只是将文字Prize (n)（其中n是奖品编号）存储在属性data-prize中，我们稍后可以使用以下方式访问它：

var prize = document.elementFromPoint(pointerX, pointerY); console.log($(prize).data('prize'));

当我们用我建议的代码替换部分代码时，你会得到：

// Get visual center of pointer var $pointer = $('.rafflebox .pointer'); var pointerX = $pointer.offset().left + $pointer.width() * 0.5; var pointerY = $pointer.offset().top + $pointer.height() * 0.5; $( ".giftwrapper" ).css({left: "0"}); $('.giftwrapper').animate({left: "-="+distance},10000,function(){ // Hide pointer first, otherwise it will be returned as the topmost element $pointer.hide(); // Get element from pointer's visual center var prize = document.elementFromPoint(pointerX, pointerY); // Show it again $pointer.show(); alert('You Won Gift ' + $(prize).data('prize')); btn.show(); });

这是您的更新笔，其中包含一个工作示例：https://codepen.io/terrymun/pen/dVPdMg

更新了示例

指针在奖品之间落入的可能性非常小。为防止出现这种情况，您需要在padding元素上使用margin代替.gift：

.gift { // Change margin to padding padding: 0px 4px; }

...并对返回的prize节点执行其他检查：

// Hide pointer first, otherwise it will be returned as the topmost element $pointer.hide(); // Get element from pointer's visual center var $prize = $(document.elementFromPoint(pointerX, pointerY)); // If prize lands on the .gift element instead if(!$prize.is('img')) $prize = $prize.find('img') // Show it again $pointer.show(); alert('You Won Gift' + $prize.data('prize')); btn.show();

这里的笔只是原始解决方案的一个分支，但是夸张的水平填充增加了指针落在两个部分之间的可能性：https://codepen.io/terrymun/pen/rGaJmY

Answer 2

您可以尝试将其替换为distance

var distance = giftamount *  cycle * gw   + (randomgift*gw) - containercenter -24;

这个想法如下：使用distance=- containercenter;，您将移动到与容器中心左对齐。为此，您添加一定数量的周期giftamount * cycle * gw，最后添加一个随机数量的礼物元素（(randomgift*gw)）。

我无法找出常量-24的来源。我硬编码，它需要更好地定义，但我想它可能取决于一些边距/近似/ jQuery / CSS / ??

现在你应该看到动画总是停在礼物元素中的同一点（中间）。要添加随机偏差，您可以使用小偏差dev（这样可以保留在礼品元素中），如下所示：

var dev = Math.random()*(giftcenter+1);
var distance = giftamount *  cycle * gw   + (randomgift*gw) - containercenter -24 +dev;

更新了演示：https://codepen.io/anon/pen/RLNeBX

用距离计算div数

2 个答案:

更新了示例