Блог

Главная - Вопросы по программированию - DIV привязывается к сетке и следует за мышью

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

#javascript #jquery #css

#javascript #jquery ( jquery ) #css — код #jquery #css

Вопрос:

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

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

 $(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);
  }
});

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

Ответ №1:

Вы можете сделать это с помощью определения размера квадрата и минус 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>

Комментарии:

1. Спасибо за это, но красный Div должен привязываться к сетке размером 3×3 пикселя