Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.02.2016, 17:03
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Окей. Для горизонтали.

<style>
        div {
	  display: flex;
	  justify-content: space-between;
	  padding: 30px;
	  background-color: #fff;
	  border: 1px solid #999;
	  cursor: pointer;
	}

	span {
	  width: 100px;
	  height: 100px;
	  background-color: tomato;
	  color: #fff;
	  text-align: center;
	  font-size: 80px;
	  -moz-user-select: none; /* fucking double click :D */
	}
    </style>

    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
<script>
var div = document.querySelector('div');
             div.addEventListener('click', function (e) {

                 var x = e.clientX;
                 var span = document.querySelectorAll('span');
                 var temp = span[0];
                 [].some.call(span, function (elem) {
                     if (elem.offsetLeft > x) {
                         var rightCoordBlock = temp.offsetLeft + temp.offsetWidth;
                         var lenBetweenBlock = elem.offsetLeft - (rightCoordBlock);
                         if ((rightCoordBlock + parseInt(lenBetweenBlock / 2)) < x) temp = elem;
                         return true;
                     }
                     temp = elem;
                 });                


                 [].forEach.call(span,function(elem){
                     (elem == temp) ? elem.innerHTML = '+' : elem.innerHTML = '';
                 })
             })
</script>
Ответить с цитированием
  #12 (permalink)  
Старый 13.02.2016, 17:11
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Оптимальнее будет вычислять растояния от центра каждого блока до точки (e.clientX, e.clientY). Минимальное расстояние из всех прямых и будет ответом в задаче.

Или, например, так как все блоки имеют одинаковую ширину и отступы между, то можно вычислить ширину, которую занимает такой элемент на странице (ширина блока + правый отступ). Далее целочисленно делим e.clientX на эту ширину и получаем сколько блоков нам нужно пропустить, чтобы получить нужный.

Вариантов вагон
Ответить с цитированием
  #13 (permalink)  
Старый 13.02.2016, 17:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от destus
Оптимальнее будет вычислять растояния от центра каждого блока до точки (e.clientX, e.clientY). Минимальное расстояние из всех прямых и будет ответом в задаче.
ой ... пост 5 не оно разве?
Ответить с цитированием
  #14 (permalink)  
Старый 13.02.2016, 17:16
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Сообщение от рони Посмотреть сообщение
ой ... пост 5 не оно разве?
a,b,c,d... тяжело все это читается Но кажется да.
Ответить с цитированием
  #15 (permalink)  
Старый 13.02.2016, 17:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от destus
Минимальное расстояние из всех прямых и будет ответом в задаче.
пока неизвестно может быть первый элемент с таким растоянием, так будет точнее
Ответить с цитированием
  #16 (permalink)  
Старый 13.02.2016, 17:23
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Даже 5 пост можно немного оптимизировать. Не записывать всё в новый массив и находить минимум, а использовать Array.reduce.
Ответить с цитированием
  #17 (permalink)  
Старый 13.02.2016, 18:19
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

Цитата:
вопрос только - можно кликнуть так что минимальное растояние будет одинаковое для нескольких элементов, тогда как?
Ну, по сути, минимального расстояния вообще не будет.
Разная может быть ширина блоков и высота контейнера.

<style>
.container {
	padding: 50px 0;
	display: flex;
	background-color: #fff;
	border: 1px solid #999;
}
.block {
	height: 50px;
	background-color: tomato;
	border: 1px solid #333;
}
</style>
<div class="container">
	<div class="block" style="width: 35%"></div>
	<div class="block" style="width: 45%"></div>
	<div class="block" style="width: 20%"></div>
</div>
Ответить с цитированием
  #18 (permalink)  
Старый 13.02.2016, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Lemme, ближайший блок к клику дубль 2
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>


<style>
.container {
	padding: 50px 0;
	display: flex;
	background-color: #fff;
	border: 1px solid #999;
}
.block {
	height: 50px;
	background-color: tomato;
	border: 1px solid #333;
}
</style>
<div class="container">
	<div class="block" style="width: 35%"></div>
	<div class="block" style="width: 45%"></div>
	<div class="block" style="width: 20%"></div>
</div>


<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = document.querySelector(".container"),
        e = d.querySelectorAll(".block"),
        c;
    d.addEventListener("click", function(b) {
        c = [].map.call(e, function(a) {
            a = a.getBoundingClientRect();
            c = a.left > b.clientX ? a.left : a.right < b.clientX ? a.right : b.clientX;
            c -= b.clientX;
            a = a.top > b.clientY ? a.top : a.bottom < b.clientY ? a.bottom : b.clientY;
            a -= b.clientY;
            return Math.sqrt(c * c + a * a)
        });
        var d = Math.min.apply(null, c);
        [].forEach.call(e, function(a, b) {
            a.innerHTML = c[b] > d ? "" : "+"
        })
    })
});
</script>

</body>

</html>

Последний раз редактировалось рони, 13.02.2016 в 21:15.
Ответить с цитированием
  #19 (permalink)  
Старый 13.02.2016, 20:08
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

рони, круто, универсально, но, ад =)))

p.s может какие-то книжки с подобнымыми манипуляциями кто-то всречал?=)
Ответить с цитированием
  #20 (permalink)  
Старый 13.02.2016, 21:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от Lemme
может какие-то книжки с подобнымыми манипуляциями
Расстояние от точки до прямой на плоскости и в пространстве – определение и примеры нахождения.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить элемент с указанным содержимым cevut Events/DOM/Window 4 08.07.2014 12:59
Как вытащить дочерний элемент? alexandr_v-vich Элементы интерфейса 7 29.02.2012 14:35
Как получить второй дочерний элемент, или второй смежный libinstyle Events/DOM/Window 4 30.06.2010 20:41
Как получить указатель на элемент вызвавший функцию pelayo Общие вопросы Javascript 9 29.06.2010 23:32
задействовать только дочерний элемент roma86 jQuery 2 03.10.2009 21:36