DIV привязывается к сетке и следит за мышью

Мне нужен небольшой квадрат div, который следует за мышью, но привязка к сетке 3x3 пикселей.

Вот моя попытка:

$(document).mousemove(function(e) {
  window.x = e.pageX;
  window.y = e.pageY;
  if(window.x % 9 === 0 ){
    $("div").css("left",window.x);
    $("div").css("top",window.y);
  }
});

Но он отлично держится и очень медленный. Кроме того, pixelgrid должен быть выровнен по отношению к позиции родительского контейнера div, а не к размеру окна браузера.

javascript,jquery,css,

1

Ответов: 1


0 принят

Вы можете сделать это, указав квадратный размер и минус widthи height.

Пожалуйста попробуйте:

ОБНОВИТЬ

$(document).mousemove(function(e) {
  demiSquareX = $(".inner").width()/2;
  demiSquareY = $(".inner").height()/2;
  windowX = e.pageX - $(".outer").offset().left - demiSquareX ;
  windowY = e.pageY - $(".outer").offset().top - demiSquareY;
  if(windowX<=0 || windowX >=($(".outer").width()-$(".inner").width()) || windowY <=0 || windowY >= ($(".outer").height()-$(".inner").height())){
      //out
  }else{
    if(windowX % 3 == 0 || windowY % 3 == 0){
      $(".inner").css("left",windowX);
      $(".inner").css("top",windowY);
     }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="border:3px solid black;width:300px;position:relative;height:300px;left:100px;top:50px">
 <div class="inner" style="background:red;width:20px;height:20px;position:absolute"></div>
</div>

JavaScript, JQuery, CSS,
Похожие вопросы