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内鼠标坐标位置及绝对和相对坐标获取的更多相关文章

  1. 获取鼠标经过位置的X、Y坐标

    利用JavaScript获取鼠标经过位置的X.Y坐标方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  2. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  3. MFC中状态栏显示鼠标坐标位置

    原文:MFC中状态栏显示鼠标坐标位置,蝈蝈 1,利用MFC向导创建一个应用工程ewq. 2,打开ResourceView,右击Menu菜单,插入Menu,在空白处双击,Caption中填入Point. ...

  4. C#窗体越界时鼠标还能回到初始坐标位置

    对窗体加越界限制后,鼠标拖动窗体越界时,窗体不能动,鼠标位置可动,但窗体不再越界时,鼠标位置还能回到鼠标按下时相对窗体的坐标:1.首先创建一个窗体Form1,然后在窗体上拖一个button1按钮(主要 ...

  5. DIV内滚动条滚动到指定位置

    相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  6. 如何用jQuery实现div随鼠标移动而移动(详解)?----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  7. 前端笔记之JavaScript(十一)event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  8. JS事件(四)坐标位置

    1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...

  9. 如何用jQuery实现div随鼠标移动而移动?(详解)----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

随机推荐

  1. Tarjan 算法求割点、 割边、 强联通分量

    Tarjan算法是一个基于dfs的搜索算法, 可以在O(N+M)的复杂度内求出图的割点.割边和强联通分量等信息. https://www.cnblogs.com/shadowland/p/587225 ...

  2. 算法导论 第六章 堆排序(python)

    6.1堆 卫星数据:一个带排序的的数通常是有一个称为记录的数据集组成的,每一个记录有一个关键字key,记录的其他数据称为卫星数据. 原地排序:在排序输入数组时,只有常数个元素被存放到数组以外的空间中去 ...

  3. centos挂载本地镜像作为yum源

    1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/   [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...

  4. python编程之API入门: (二)python3中使用新浪微博API

    回顾API使用的流程 通过百度地图API的使用,我理解API调用的一般流程为:生成API规定格式的url->通过urllib读取url中数据->对json格式的数据进行解析.下一步,开始研 ...

  5. SQL中varchar和nvarchar的基本介绍及其区别

    SQL中varchar和nvarchar的基本介绍及其区别 varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储 ...

  6. Flask--init和run启动研究---xunfeng巡风实例篇

    第一: 首先在view目录下的__init__.py文件定义好 (1) Flask实例 : app = Flask(__name__) (2) 数据库实例 Mongo = Conn.MongoDB(a ...

  7. 关于NSArray的去重

    提到去重,第一反应就是for或while循环来遍历处理. 然后有了几种思路: 1) 两个循环嵌套 对比 然后去重: 但是这种方法会数据丢失, arr为要去重的数组 ; i<arr.count; ...

  8. 解决Genymotion不能安装软件的问题

    解决Genymotion不能安装软件的问题 官方取消了with google apps字样的rom,导致安装app不兼容的解决 有些童鞋在兴奋的打开Genymotion模拟器后可能会发现无法安装下载下 ...

  9. 安装Android SDK(东软开源镜像介绍)

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...

  10. centos下wget时提示unable to resolve host address ...

    网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...