Показать сообщение отдельно
  #6 (permalink)  
Старый 23.11.2016, 14:48
Новичок на форуме
Отправить личное сообщение для EuRo1985 Посмотреть профиль Найти все сообщения от EuRo1985
 
Регистрация: 22.11.2016
Сообщений: 8

Решил задачу следующим образом

$('.circles div img').each(function(i){
					
		var relParent = $('#slide-business');
		var ctrImg = $('.circles > img');
		var curImg = $(this);
		var curDiv = $(this).parent();
		var line = $('#slide-business svg line');
		var lineMargin = 0.3;
				
		var ctrImgCoorX = parseInt(ctrImg.css('left'));
		var ctrImgCoorY = parseInt(ctrImg.css('top'));
		
		if(curDiv.css('top') !== 'auto' || curDiv.css('top') < ctrImgCoorY) {
			var curImgCoorY = parseInt(curDiv.css('top'))+curImg.height()/2;
		} else {
			var curImgCoorY = relParent.height()-parseInt(curDiv.css('bottom'))-curImg.height()/2;
		}
		
		if(curDiv.css('left') !== 'auto' || curDiv.css('left') < ctrImgCoorX) {
			var curImgCoorX = parseInt(curDiv.css('left'))+curImg.width()/2;
		} else {
			var curImgCoorX = relParent.width()-parseInt(curDiv.css('right'))-curImg.width()/2;
		}
		
		if(curImgCoorX>ctrImgCoorX){
			var lineAngle = Math.atan2(curImgCoorX-ctrImgCoorX,ctrImgCoorY-curImgCoorY);
		} else {
			var lineAngle = Math.atan2(ctrImgCoorX-curImgCoorX,curImgCoorY-ctrImgCoorY);
		}

		var ctrSideX = Math.abs(Math.sin(lineAngle)*(ctrImg.width()/2));
		var ctrSideY = Math.abs(Math.cos(lineAngle)*(ctrImg.height()/2));	
		var curSideX = Math.abs(Math.sin(lineAngle)*(curImg.width()/2));
		var curSideY = Math.abs(Math.cos(lineAngle)*(curImg.height()/2));
				
		if(curImgCoorX>ctrImgCoorX){
			line.eq(i)
				.attr('x1',ctrImgCoorX+ctrSideX+(curSideX*lineMargin))
				.attr('x2',curImgCoorX-curSideX-(curSideX*lineMargin))
		} else {
			line.eq(i)
				.attr('x1',ctrImgCoorX-ctrSideX-(curSideX*lineMargin))
				.attr('x2',curImgCoorX+curSideX+(curSideX*lineMargin))
		}
		
		if(curImgCoorY>ctrImgCoorY){
			line.eq(i)
				.attr('y1',ctrImgCoorY+ctrSideY+(curSideY*lineMargin))
				.attr('y2',curImgCoorY-curSideY-(curSideY*lineMargin));
		} else {
			line.eq(i)
				.attr('y1',ctrImgCoorY-ctrSideY-(curSideY*lineMargin))
				.attr('y2',curImgCoorY+curSideY+(curSideY*lineMargin));
		}
		
	});


По сути вообще убрал классы и через ф-цию each перебираю элементы img и подставляю в координаты line с соответствующим индексом.
Ответить с цитированием