javascript - 用另一个移动的 div 影响一个 div 容器的运动

Question

抱歉，标题令人困惑。但是，你可以看到 here a JsFiddle DEMO我的意思是。

我想要实现的是，一旦黑色容器接触到红色容器容器，就移动它。意思是，我不希望红色容器与黑色重叠，我试图相对于红色容器的位置移动红色。我可能确定这可以使用带有 float /边距/显示调整的普通 CSS 来实现，我现在无法制作。

代码如下:

JavaScript

var speed =80, deg=0, center={x:50,y:50},
        moveBox = function(){
            var el = document.getElementById("circle"),
                left = el.offsetLeft,
                moveBy = 3; 
                deg+=moveBy;
                el.style.left =center.x+Math.floor(40*Math.sin(deg/150*Math.PI))+"px";
                el.style.top =center.y+Math.floor(20*Math.cos(deg/150*Math.PI))+"px";
        };

var timer = setInterval(moveBox, speed);

HTML

<div id='square'></div>
<div id='circle'></div>

CSS

#circle{background:red; display:inline-block; width:80%; height:40px; position:absolute; border:1px solid #454545; margin-top:100px;}
#square{width:60px; height:50px; background:black; display:block; position:relative; position:absolute; margin-left:100px; margin-top:100px;}

Answer 1

我一直在你的 Fiddle 上玩弄这个，目前它似乎非常无法完成。要解决动画完成时 div 移动的问题，您可以在它们上放置相对/绝对 css 位置。但是当你这样做时，它打破了该死的圈子。

所以，如果你能弄清楚如何在没有像这样的 css 位置的情况下使圆圈工作，那么它应该会自行解决。很抱歉未能为您找到简单的解决方案。