Влияет на движение контейнера div с другим движущимся div

Извините за запутанное название. Но, вы можете видеть here a JsFiddle DEMO Что я имею в виду.Влияет на движение контейнера div с другим движущимся div

То, что я пытаюсь достичь, это переместить черный контейнер, как только он соприкоснется с красным контейнером. Значит, я не хочу, чтобы красный контейнер перекрывался с черным, я пытаюсь переместить красный цвет относительно положения красного. Вероятно, я уверен, что этого можно добиться с помощью обычного CSS с настройками float/margin/display, которые я не могу произвести сейчас.

Вот код:

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;}

источник

2013-11-16 ANW

Не так просто, как кажется. Во-первых, элементы с абсолютным позиционированием выводятся из нормального потока документов. Кроме того, относительное позиционирование не влияет на поток документа (их позиция в потоке документа такая же, как если бы они были статическими). Для этого с помощью CSS потребуется довольно много рефакторинга из вашего примера. –

@ FabrícioMatté Я думаю, вы правы. Я думал, что решение будет чем-то простым, я не могу заставить себя видеть. Но, я думаю, я должен ждать и видеть, если кто-то может прийти с другой альтернативой, – ANW

Я играл с этим на вашей скрипке, и на данный момент это кажется очень непривлекательным. Чтобы устранить проблемы, связанные с перемещением div, когда анимация завершена, вы устанавливаете на них относительную/абсолютную позицию css. Но когда вы делаете это с вашей стороны, это ломает чертов круг.

Итак, если вы можете понять, как заставить круг работать без позиции css, как это, тогда он должен работать сам. Извините за отсутствие поиска простого решения для вас.

источник

2013-11-16 21:35:12 MrJustin

Влияет на движение контейнера div с другим движущимся div

ответ

Смежные вопросы