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相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
随机推荐
- ACM模板(Java)
模板 Trie HIHOCODER1014 static final int N = (int)1e5+10; static final int SIGMA=(int)27; static int c ...
- 关于Spring的理解和相关笔记
java不死的原因就是:就是因为他有一个核心非常强大的技术框架支持. Spring IOC: Inverse Of Control 控制反转 IFly fly; AOP: Aspect Oriente ...
- 【07】QQ群管理公告小结:
[07]QQ群管理公告小结: 01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外), 03,修改群名片 ...
- luogu4093 [HEOI2016/TJOI2016]序列
因为一个变化只会变化一个值,所以 \(dp[i]=max(dp[j])+1,j<i,maxval_j \leq a[i], a[j] \leq minval_i\) 发现跟二维数点问题挺像,树状 ...
- Fiddler抓包-工具介绍(request和response)
from:https://www.cnblogs.com/yoyoketang/p/6731121.html 本篇简单的介绍下fiddler界面的几块区域,以及各自区域到底是干什么用的,以便于各好的掌 ...
- 大数据学习——hadoop集群搭建2.X
1.准备Linux环境 1.0先将虚拟机的网络模式选为NAT 1.1修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=itcast ### ...
- 大数据学习——shell编程
03/ shell编程综合练习 自动化软件部署脚本 3.1 需求 1.需求描述 公司内有一个N个节点的集群,需要统一安装一些软件(jdk) 需要开发一个脚本,实现对集群中的N台节点批量自动下载.安装j ...
- css装饰文本框input
在web程序前端页面中,<input>恐怕是用的最多的html元素了,各个需要录入信息的场合都会用到它,一般都会用css来修饰一下使得它更好看. 原始的不加修饰的文本框像下面,有些单调,页 ...
- windows 2008、2012防火墙添加入站规则教程(端口例外)
windows2008.2012的设置方法基本一样,以下是以windows2008为例做添加80端口的步骤. 1.依次点“控制面板”→“系统和安全”→“windows防火墙”→“高级设置”,打开“高级 ...
- [codeforces724D]Dense Subsequence
[codeforces724D]Dense Subsequence 试题描述 You are given a string s, consisting of lowercase English let ...