13.02.2016, 17:03
|
 |
Профессор
|
|
Регистрация: 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>
|
|
13.02.2016, 17:11
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
Оптимальнее будет вычислять растояния от центра каждого блока до точки (e.clientX, e.clientY). Минимальное расстояние из всех прямых и будет ответом в задаче.
Или, например, так как все блоки имеют одинаковую ширину и отступы между, то можно вычислить ширину, которую занимает такой элемент на странице (ширина блока + правый отступ). Далее целочисленно делим e.clientX на эту ширину и получаем сколько блоков нам нужно пропустить, чтобы получить нужный.
Вариантов вагон  |
|
13.02.2016, 17:15
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от destus
|
|
Оптимальнее будет вычислять растояния от центра каждого блока до точки (e.clientX, e.clientY). Минимальное расстояние из всех прямых и будет ответом в задаче.
|
ой ... пост 5 не оно разве? |
|
13.02.2016, 17:16
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
Сообщение от рони
|
|
ой ... пост 5 не оно разве?
|
a,b,c,d... тяжело все это читается Но кажется да. |
|
13.02.2016, 17:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от destus
|
|
Минимальное расстояние из всех прямых и будет ответом в задаче.
|
пока неизвестно может быть первый элемент с таким растоянием, так будет точнее |
|
13.02.2016, 17:23
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
Даже 5 пост можно немного оптимизировать. Не записывать всё в новый массив и находить минимум, а использовать Array.reduce.
|
|
13.02.2016, 18:19
|
 |
Профессор
|
|
Регистрация: 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>
|
|
13.02.2016, 19:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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.
|
|
13.02.2016, 20:08
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
|
рони, круто, универсально, но, ад =)))
p.s может какие-то книжки с подобнымыми манипуляциями кто-то всречал?=)
|
|
13.02.2016, 21:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
|
|
|
|
