:) Окей. Для горизонтали.
<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>
|
Оптимальнее будет вычислять растояния от центра каждого блока до точки (e.clientX, e.clientY). Минимальное расстояние из всех прямых и будет ответом в задаче.
Или, например, так как все блоки имеют одинаковую ширину и отступы между, то можно вычислить ширину, которую занимает такой элемент на странице (ширина блока + правый отступ). Далее целочисленно делим e.clientX на эту ширину и получаем сколько блоков нам нужно пропустить, чтобы получить нужный. Вариантов вагон :D |
Цитата:
|
Цитата:
|
Цитата:
|
Даже 5 пост можно немного оптимизировать. Не записывать всё в новый массив и находить минимум, а использовать Array.reduce.
|
Цитата:
Разная может быть ширина блоков и высота контейнера.
<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>
|
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>
|
рони, круто, универсально, но, ад =)))
p.s может какие-то книжки с подобнымыми манипуляциями кто-то всречал?=) |
Цитата:
|
| Часовой пояс GMT +3, время: 22:01. |