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相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
随机推荐
- 【转】关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)
讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...
- [luoguP1364] 医院设置(树的重心)
传送门 假设数据再大些,我这就是正解,然而题解里总是各种水过. 两边dfs,一遍求重心,一遍统计距离. ——代码 #include <cstdio> #include <cstrin ...
- PHP日历程序编写(简单实现)
<meta charset="utf-8"><?php $year = isset($_GET['year']) ? $_GET['year'] : date(& ...
- vs2010 静态使用 opencv 2.46 库
下载opencv2.46的库,假设解压到OpenCV246,设置如下: 在工程的c++的include目录下添加:OpenCV246\opencv\build\include 在工程的c++的lib目 ...
- 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 ...
- React Native资料汇总
React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...
- [Android] 随时拍图像处理部分总结及源码分享
http://blog.csdn.net/eastmount/article/details/45492065#comments [Android] 图像各种处理系列文章合集 http://blog. ...
- 三、fs文件操作模块
fs模块用于文件的读写等操作. 该模块有如下这些方法: 1.fs.stat() : 检测是文件还是目录 const fs = require('fs'); fs.stat('test.html',fu ...
- 2003-07-16T01:24:32Z这是什么时间格式
这是标准的XML Schema的"日期型数据格式”. T是代表后面跟着“时间”.Z代表0时区,或者叫UTC统一时间. 世界的每个地区都有自己的本地时间,在Internet及无线电通信时,时间 ...
- MySQL Study之--Percona Server版本号
MySQL Study之--Percona Server版本号 1.简单介绍 Percona 为 MySQL 数据库server进行了改进.在功能和性能上较 MySQL 有着非常显著的提升. ...