JS Бегающее меню по стенкам экрана

Question

Есть такой сайт : 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>

визуально я имею в виду это, 8 окошек разных, аналогичных, случаев. Мячик гуляет лишь по рамке, прямыми дорожками, к центру никак не попадает!

БЛОГ НА HUSL

JS Бегающее меню по стенкам экрана

Ответы (0 шт):