Нужно нарисовать или любым иным способом провести линию от одного блока div к другому. Т.е. два элемента связать линией. Элементы генерируются динамически.
Строится все это дело на основе уровней. Например, есть пользователь с уровнем 1. Он будет на самом верху. Дальше пользователи с уровнем 2, они ниже. Нужно их соединить любым способом, как на схеме.
Схематичный пример:
Ответ
Например так:
var first = document.getElementById('first');
var second = document.getElementById('second');
var line = document.getElementById('line').getElementsByTagName('line')[0];
function shuffle() {
var pos = {
ft: Math.round(Math.random() * 50),
fl: Math.round(Math.random() * 50),
st: Math.round(Math.random() * 100) + 100,
sl: Math.round(Math.random() * 100) + 200
}
first.style.top = pos.ft + 'px';
first.style.left = pos.fl + 'px';
second.style.top = pos.st + 'px';
second.style.left = pos.sl + 'px';
line.setAttribute('x1', pos.fl + first.offsetWidth);
line.setAttribute('y1', pos.ft + first.offsetHeight);
line.setAttribute('x2', pos.sl);
line.setAttribute('y2', pos.st);
}
shuffle();
document.getElementById('shuffle').addEventListener('click', shuffle);
div {
position: absolute;
border: 2px solid #000;
width: 100px;
height: 50px;
}
#line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke: #F00;
stroke-width: 2px;
z-index: -1;
}
#shuffle { position: absolute; top: 20px; left: 50%; }
Комментариев нет:
Отправить комментарий