div内鼠标坐标位置及绝对和相对坐标获取
1
2
3
4
5
6
|
获取页面某一元素的绝对X,Y坐标 var X = $( '#DivID' ).offset().top; var Y = $( '#DivID' ).offset().left; 获取相对(父元素)位置: var X = $( '#DivID' ).position().top; var Y = $( '#DivID' ).position().left; |
一个div里面定位鼠标的相对坐标
一般我们在页面定位鼠标的坐标位置时,指的是屏幕的坐标。
$("#canvas").mousedown(function(e){
mouseX1 = e.pageX - $("#canvas").offset().left;
mouseY1 = e.pageY - $("#canvas").offset().top;
});
其中e.pageX和e.pageY是鼠标相对于整个屏幕的坐标。
offset()是jquery里面的一个方法,主要是定位某一个容器(div)距离屏幕或者父元素的相对偏移量。如果用
e.pageX - $("#canvas").offset().left;//得出鼠标在容器内的坐标X,以容器的左上角为坐标原点
e.pageY - $("#canvas").offset().top;//得出鼠标在容器内的坐标Y,以容器的左上角为坐标原点
这样就可以解决在元素里面进行canvas的涂鸦的时候,画笔痕迹漂移的问题了。很管用!
div内鼠标坐标位置及绝对和相对坐标获取的更多相关文章
- 获取鼠标经过位置的X、Y坐标
利用JavaScript获取鼠标经过位置的X.Y坐标方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- js获取div相对屏幕的坐标位置
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...
- MFC中状态栏显示鼠标坐标位置
原文:MFC中状态栏显示鼠标坐标位置,蝈蝈 1,利用MFC向导创建一个应用工程ewq. 2,打开ResourceView,右击Menu菜单,插入Menu,在空白处双击,Caption中填入Point. ...
- C#窗体越界时鼠标还能回到初始坐标位置
对窗体加越界限制后,鼠标拖动窗体越界时,窗体不能动,鼠标位置可动,但窗体不再越界时,鼠标位置还能回到鼠标按下时相对窗体的坐标:1.首先创建一个窗体Form1,然后在窗体上拖一个button1按钮(主要 ...
- DIV内滚动条滚动到指定位置
相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- 如何用jQuery实现div随鼠标移动而移动(详解)?----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- 前端笔记之JavaScript(十一)event&BOM&鼠标/盒子位置&拖拽/滚轮
一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高 ...
- JS事件(四)坐标位置
1.客户区坐标位置 (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...
- 如何用jQuery实现div随鼠标移动而移动?(详解)----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
随机推荐
- Tarjan 算法求割点、 割边、 强联通分量
Tarjan算法是一个基于dfs的搜索算法, 可以在O(N+M)的复杂度内求出图的割点.割边和强联通分量等信息. https://www.cnblogs.com/shadowland/p/587225 ...
- 算法导论 第六章 堆排序(python)
6.1堆 卫星数据:一个带排序的的数通常是有一个称为记录的数据集组成的,每一个记录有一个关键字key,记录的其他数据称为卫星数据. 原地排序:在排序输入数组时,只有常数个元素被存放到数组以外的空间中去 ...
- centos挂载本地镜像作为yum源
1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/ [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...
- python编程之API入门: (二)python3中使用新浪微博API
回顾API使用的流程 通过百度地图API的使用,我理解API调用的一般流程为:生成API规定格式的url->通过urllib读取url中数据->对json格式的数据进行解析.下一步,开始研 ...
- SQL中varchar和nvarchar的基本介绍及其区别
SQL中varchar和nvarchar的基本介绍及其区别 varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储 ...
- Flask--init和run启动研究---xunfeng巡风实例篇
第一: 首先在view目录下的__init__.py文件定义好 (1) Flask实例 : app = Flask(__name__) (2) 数据库实例 Mongo = Conn.MongoDB(a ...
- 关于NSArray的去重
提到去重,第一反应就是for或while循环来遍历处理. 然后有了几种思路: 1) 两个循环嵌套 对比 然后去重: 但是这种方法会数据丢失, arr为要去重的数组 ; i<arr.count; ...
- 解决Genymotion不能安装软件的问题
解决Genymotion不能安装软件的问题 官方取消了with google apps字样的rom,导致安装app不兼容的解决 有些童鞋在兴奋的打开Genymotion模拟器后可能会发现无法安装下载下 ...
- 安装Android SDK(东软开源镜像介绍)
启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...
- centos下wget时提示unable to resolve host address ...
网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...