检测动画对象是否触及DOM中的另一个对象

Question

我在dom中修复了一些圆形的div，还有另一个围绕它们旋转的div

我想知道轨道运行div是否触及任何一个人使用javascript采取特定行动

负责使用关键帧围绕#token div进行.stations div轨道的css代码

javascript代码使.stations div成圆形

＆＃13;

＆＃13;

$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }

});

＆＃13;

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过对此答案by gfullam稍作修改来实现此目的。

此处detectOverlap使用两个元素位置来检查是否存在碰撞。

在checkCollision()中，它会每隔10毫秒将token元素和stations逐个发送到detectOverlap()。

此代码的关键功能是getBoundingClientRect()您可以查看this链接以获取更多信息。

var detectOverlap = (function () {
    function getPositions(elem) {
        var pos = elem.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();


function checkCollision() {
    var stations = [];
    stations = $(".station");
    var elem = document.getElementById("token"); 
    var elemList = Array.prototype.slice.call(stations);
    for(var i = 0; i< stations.length; i++)
    {
      if (detectOverlap(elem, elemList[i])) {
          window.alert("CollisionNow");
          
      } else 
      {
          
      }
    }
     setTimeout("checkCollision();", 10);
}


$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }
  
  checkCollision();

});

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}


#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>