DIV捕捉到网格并跟随鼠标
DIV snap to grid and follow mouse
我需要一个小的正方形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容器的位置对齐,而不是与浏览器窗口的大小对齐。
您可以通过定义正方形大小并减去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>
- 网站跟随鼠标滚动
- 三.js - 对象跟随鼠标位置
- HTML 中跟随鼠标的动画图像蒙版
- HTML5 画布跟随鼠标效果 jquery
- D3:跟随鼠标坐标
- Div 跟随鼠标并避免浏览器边界
- Javascript html 编辑器光标焦点跟随鼠标
- 在javascript中使box边缘跟随鼠标指针
- 为什么当对象跟随鼠标时javascript会出现滞后
- 如何使Bootstrap 3工具提示跟随鼠标
- 如何在开始拖动任何对象时使iframe跟随鼠标光标
- DIV捕捉到网格并跟随鼠标
- 任何让文本区域跟随鼠标的方法
- 努力使一个对象总是跟随鼠标在box2dweb
- 图像跟随鼠标指针和淡出
- 在AngularJS中跟随鼠标的弹出对话框
- 如何让jQuery鼠标悬停工具提示跟随鼠标指针?
- 使动态图像跟随鼠标
- 如何跟随鼠标反向移动
- 有没有办法让 css3 类跟随鼠标光标