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. 【转】关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)

    讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...

  2. [luoguP1364] 医院设置(树的重心)

    传送门 假设数据再大些,我这就是正解,然而题解里总是各种水过. 两边dfs,一遍求重心,一遍统计距离. ——代码 #include <cstdio> #include <cstrin ...

  3. PHP日历程序编写(简单实现)

    <meta charset="utf-8"><?php $year = isset($_GET['year']) ? $_GET['year'] : date(& ...

  4. vs2010 静态使用 opencv 2.46 库

    下载opencv2.46的库,假设解压到OpenCV246,设置如下: 在工程的c++的include目录下添加:OpenCV246\opencv\build\include 在工程的c++的lib目 ...

  5. xhprof安装&&使用[转载]

    编译安装 wget http://pecl.php.net/get/xhprof-0.9.2.tgz tar zxf xhprof-0.9.2.tgz cd xhprof-0.9.2/extensio ...

  6. React Native资料汇总

    React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...

  7. [Android] 随时拍图像处理部分总结及源码分享

    http://blog.csdn.net/eastmount/article/details/45492065#comments [Android] 图像各种处理系列文章合集 http://blog. ...

  8. 三、fs文件操作模块

    fs模块用于文件的读写等操作. 该模块有如下这些方法: 1.fs.stat() : 检测是文件还是目录 const fs = require('fs'); fs.stat('test.html',fu ...

  9. 2003-07-16T01:24:32Z这是什么时间格式

    这是标准的XML Schema的"日期型数据格式”. T是代表后面跟着“时间”.Z代表0时区,或者叫UTC统一时间. 世界的每个地区都有自己的本地时间,在Internet及无线电通信时,时间 ...

  10. MySQL Study之--Percona Server版本号

    MySQL Study之--Percona Server版本号 1.简单介绍      Percona 为 MySQL 数据库server进行了改进.在功能和性能上较 MySQL 有着非常显著的提升. ...