You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
const distanceTarget = document.getElementById("distance-target");
|
|
const distancePad = document.getElementById("distance-pad");
|
|
const distanceRound = document.getElementById("distance-round");
|
|
|
|
let distanceRect = distancePad.getBoundingClientRect();
|
|
let distanceWidth = distancePad.clientWidth;
|
|
let distanceHeight = distancePad.clientHeight;
|
|
|
|
control = false;
|
|
|
|
distancePad.addEventListener("mouseenter", () => {
|
|
control = true;
|
|
});
|
|
|
|
distancePad.addEventListener("mouseleave", () => {
|
|
control = false;
|
|
});
|
|
|
|
distancePad.addEventListener("mousemove", (e) => {
|
|
if (control) {
|
|
var x = e.clientX - distanceRect.left; //x position within the element.
|
|
var y = e.clientY - distanceRect.top; //y position within the element.
|
|
|
|
distanceTarget.style.borderRadius = `${
|
|
(calculateDistance(distanceRound, x, y) / distanceWidth / 2) * 100
|
|
}%`;
|
|
}
|
|
});
|
|
|
|
function calculateDistance(elem, mouseX, mouseY) {
|
|
return Math.floor(
|
|
Math.sqrt(
|
|
Math.pow(mouseX - (elem.offsetLeft + elem.clientWidth / 2), 2) +
|
|
Math.pow(mouseY - (elem.offsetTop + elem.clientHeight / 2), 2)
|
|
)
|
|
);
|
|
}
|