Javascript 用距离计算div数

我正在制作一个类似赌场轮盘赌的旋转木马，但在制作动画时，我找不到知道哪个部门编号的方法。当我做动画循环时，我试图通过距离计算，但我不工作

这是我的例子

var giftamount=10；
var gw=$（'.gift'）。外套宽度（真）；
var giftcenter=gw/2；
var循环=7；
var containercenter=$（'.boxwrapper'）.outerWidth（true）/2；
对于（var i=0；i如果您想要获得指针下方的奖品（垂直红色条），您实际上不必计算距离。相反，您可以使用一种非常方便但不太为人所知的DOM API方法，即，在该方法中，您可以获得对页面x，y坐标下最顶部DOM节点的引用

为了使其工作，
x
和
y
必须与指针的视觉中心相对应，我们可以使用以下方法简单计算：

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节点有了正确的引用，您可以决定要在“prize”DOM节点中存储何种元数据。例如，您可以在HAML中嵌入HTML5数据属性：

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

…它只是将文本
Prize（n）
（其中
n
是奖品编号）存储在属性
数据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();                  
   });

这是您的更新笔，带有一个工作示例：


更新示例
指针落在奖品之间的可能性很小。为防止出现这种情况，您需要在
元素上使用
填充
，而不是
边距
。礼品
元素：

.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();                  

这里的笔只是原始解决方案的一个叉子，但带有夸张的水平填充，以增加指针在两个IAMGE之间落地的机会：
您可以尝试用它代替
距离

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

其思想如下：使用
distance=-containercenter；
可以移动到与容器中心左对齐的位置。
在此基础上，添加一定数量的周期
giftamount*cycle*gw
，最后添加随机数量的礼品元素（
（randomgrift*gw）
）

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

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

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

更新的演示：
你能试着更具体地说明问题所在吗？我想这只是措辞上的问题。你想看看你落在哪个奖品箱上吗？我假设获奖的奖品是指针下面的（垂直红线）？@Terry这肯定是你赢得的奖品，但考虑到警报包含不同的值，我试图了解问题是否真的存在于确定这一点上。我要求澄清问题，但也质疑逻辑。不用担心：）我现在正在写我的答案，已经有了一个有效的解决方案。@Terry听起来不错-我在生产中也有工作代码，因为这是许多CS:GO案例开放网站的流行动态，但我的实现不依赖于对UI元素的任何计算，而是动态创建/删除元素，其奖金是预定义的-非常相同方式CS：去做吧。根据客户端发生的事情来确定实际的奖金太冒险了。值得注意的是，这个值不应该被信任，因为任何人都可以简单地修改客户端任何元素的
数据奖金
属性。
var dev = Math.random()*(giftcenter+1);
var distance = giftamount *  cycle * gw   + (randomgift*gw) - containercenter -24 +dev;