用另一個移動div影響div容器的運動

Question

抱歉，標題令人困惑。 但是，您可以在這里看到JsFiddle 演示，這是我的意思。

我要實現的目標是，一旦黑色容器與紅色容器接觸，請立即移動它。 意思是，我不希望紅色容器與黑色容器重疊，我正在嘗試相對於紅色容器的位置移動紅色容器。 我大概可以肯定，這可以使用現在無法生成的具有浮動/邊距/顯示調整的普通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

我一直在玩弄你的小提琴，此刻看來似乎毫無任務可言。 要解決動畫制作完成后div移動的問題，請在其上放置相對/絕對css位置。 但是，當您對自己執行此操作時，它會破壞該死的圈子。

因此，如果您可以弄清楚如何在沒有css位置的情況下使圓工作，那么它應該可以自行工作。 抱歉，找不到適合您的簡單解決方案。