Есть такой сайт : Hellomonday там справа выпуклое меню, если листать сайт, то меню скрываться, а так же её можно будет вызвать по всей высоте сайте направив курсор на правую границу.
Моя задача : сделать такую бегающую штуку по всем стенкам, чтобы куда не направишь мышку - вылазит кружок.
Вот то что я сделал : Сделал это в виде круговой области, а нужно прямоугольник, но вообще не шарю как сделать функцию прямоугольника (нужно для всех размеров экранов).
var menu = $('#menu'),
b = menu.find('div');
menu.show();
var x1 = menu.offset().left,
y1 = menu.offset().top;
var r = 70,
x, y, isEyeProcessed = false;
$('html').mousemove(function(e) {
if (!isEyeProcessed) {
isEyeProcessed = true;
var x2 = e.pageX,
y2 = e.pageY;
// функция круга х^2 + y^2 = r^2 , но я хочу сделать прямоугольник, это |x| + |y| = r,
// |..| = abs(..) = модуль! как реализовать это не понимаю.
y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)));
x = ((y * (x2 - x1)) / (y2 - y1));
b.css({
marginTop: y + 'px',
marginLeft: x + 'px'
});
isEyeProcessed = false;
}
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%
}
.case-menu {
position: absolute;
display: none;
}
.menu-ball {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
#menu {
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="menu" class="case-menu">
<div class="menu-ball"></div>
</div>