Lemme,
кликая можно увидеть какой блок скрипт выбрал ближайшим и какое место на этом блоке ближе всего к точке клика
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.container {
display: flex;
justify-content: space-between;
padding: 120px;
background-color: #FF8C00;
border: 1px solid #999;
cursor: pointer;
}
span {
cursor: default;
padding: 0;
width: 100px;
height: 100px;
background-color: #32CD32;
color: #fff;
text-align: center;
font-size: 80px;
-webkit-user-select: none;
user-select: none;
-moz-user-select: none; /* fucking double click :D */
}
.arrow {
-webkit-transform-origin: 0;
-moz-transform-origin: 0;
-o-transform-origin: 0;
transform-origin: 0;
position: absolute;
}
.arrow:before,
.arrow:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 40px solid transparent;
border-right: 0;
}
.arrow {
width: 0px;
height: 2px;
background: #0000CD;
}
.arrow:after {
top: -5px;
right: 0px;
border-left-color: #0000CD;
border-width: 6px 0 6px 30px;
}
.arrow.replay:before,
.arrow.replay:after {
display: none;
}
.arrow.replay {
border-radius: 50%;
border: 2px solid #F0FFF0;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
background-color: transparent ;
-webkit-animation: ripple 2s ease-in-out infinite;
-moz-animation: ripple 2s ease-in-out infinite;
-o-animation: ripple 2s ease-in-out infinite;
animation: ripple 2s ease-in-out infinite;
}
@keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
margin-left: 0px;
}
100% {
margin-left: -15px;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}</style>
<div class="container">
<span></span>
<span></span>
<span></span>
</div>
<div class="arrow"></div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var e = document.querySelector(".container"),
h = e.querySelectorAll("span"),
d = document.querySelector(".arrow"),
c;
e.addEventListener("click", function(b) {
var g = [];
c = [].map.call(h, 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;
g.push(360 - 180 / Math.PI * Math.atan2(a, c));
return Math.sqrt(c * c + a * a)
});
var f = Math.min.apply(null,c),
e = c.indexOf(f);
d.style.left = b.clientX + "px";
d.style.top = b.clientY + "px";
d.style.width = (f ? f : 30) + "px";
f ? (d.classList.remove("replay"),
d.style.transform = "rotate(-" + g[e] + "deg)",
d.style.webkitTransform = "rotate(-" + g[e] + "deg)") : d.classList.add("replay")
})
});
</script>
</body>
</html>
