首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取鼠标当前位置坐标

2017-03-01 10:08:42 在页面中获取鼠标坐标通常有三种方式,这三种方式各有不同,所的的值也是不一样的。  首先是相对于页面的pageX和pageY。...他值的是鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化。 相对于屏幕来说的screenX/screenY。...这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 相对于坐标系的layerX/layerY。...FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

14.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent...所以,要得到元素到文档区域坐标位置,只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止。...js代码: // 获取元素到文档区域坐标 function getPosition(element) { var actualLeft = element.offsetLeft, actualTop...js代码: // 获取元素到文档区域坐标 function getPosition(element){ var dc = document, rec = element.getBoundingClientRect...结语:上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述,如遇到相关问题,可联系本人或直接发表评论,另外,对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度

2.5K30

js获取网页屏幕可视区域高度

document.documentElement.clientHeight ==> 可见区域高度 看了以上代码,可能会有疑问说body和可见区域到底有什么不同呢,我们在console里运行一下会发现在不同的网页中有不同的情况值...以下是兼容主流浏览器(IE/Firefox/Chrome/Safari)获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码: ? ?...1 // 获取浏览器窗口的可视区域的宽度 2 function getViewPortWidth() { 3 return document.documentElement.clientWidth...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8...return document.documentElement.clientHeight || document.body.clientHeight; 9 } 10 11 // 获取浏览器窗口水平滚动条的位置

9.4K10

JS获取图片原始宽高

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement,通过给src赋值,最终来获取...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

6.1K20

获取地图某个圆形区域内所有的有数据坐标

原始需求 最近在做一个项目,需要获得地图上任意坐标点为中心150公里范围内所有数据库内有效坐标点。团队内最疯狂快速的想法是指数据库内所有当前国家的坐标点全取来,然后一一和中心点进行比较。...若干小区域并对其进行编号,开G进行搜索后发现Google家对其算法库进行了封装出了一个S2Geometry C++类库。 准备环境 按官方的建议,该库可以支持MacOS或Linux平台。...install libgflags-dev libgoogle-glog-dev libgtest-dev libssl-dev # 编译器安装 $ apt-get install cmake # 获取...,后面的32位4进制就是希尔伯特曲线一级一级下来的坐标系。...每一位也叫一个等级,等级越高表示的区域越大。

1.4K40

JS获取图片中随机一点颜色

实现效果 昨天泽泽分享了一篇有意思的文章:纯CSS根据图片取色设置背景色,主要分享了一个就是div嵌套img的时候,如何实现div的颜色为img中一点的颜色。...如下图所示,在PS中打开一张图片,如果将这张图片一直放大,具体到每个像素点,会发现图片单个像素点内的颜色值都是唯一的。...实现效果 有了具体的思路了就是如何实现了,因为我这个页面是前后端渲染的动态页面,改PHP代码的话有点麻烦,所以我就考虑从前端入手,使用JQuery来实现: 获取每一个友链链接.board-item; 然后通过显示迭代获取每一个友链中的背景图...; 然后将下方文字的背景图设置为获取的背景图地址,同时,使用Math.random()产生一个随机数,这样的话就可以实现对图片中随机一点进行取色,且每次刷新都会产生不一样的效果。...text-align:center; } span { color:red; } <script src="https://code.jquery.com/jquery-latest.<em>js</em>

3.7K30

一招轻松获取图片中鼠标点击处坐标

通过鼠标点击获取图像的坐标值,当然也可以进一步通过坐标获取 RGB 值。...用途: 1、可用于获取 mask 区域坐标 2、获取关键点、线坐标,便于制图等 目标: 假设目前我们的任务是希望获取车辆进入减速带时的速度,那么首先需要做的第一件事就是获取减速带的区域坐标。...它为我们提供了每个鼠标事件的坐标(x,y)。 官方给了一些demo,用于绘制圆和矩形。 这里我们参考demo,做一定的修改,绘制点,并返回坐标即可。...代码实现 这里可以通过修改,读入图片的路径,切换到大家所需要处理的图片。...1、通过鼠标坐标的点击,即可获取坐标值 2、图片上会显示一个小点、坐标值,并在终端中显示坐标值 # coding: utf-8 import cv2 import numpy as np img =

2.1K10

python3+openCV 获取图片中文本区域的最小外接矩形实例

print("thresh =",thresh) coords = np.column_stack(np.where(thresh 0))//获取thresh二值灰度图片中的白色文字区域的点 print...("coords =",coords) min_rect = cv2.minAreaRect(coords)//由点集获取最小矩形(包含中心坐标点、宽和高、偏转角度) print("min_rec =...",min_rect) box = cv2.boxPoints(min_rect)//获取最小矩形的4个顶点坐标。...但是通过一下这个绘制矩形函数,画出来上述的最小矩形与文字区域偏差很大,但是获取到的偏转角度是对的。 不明白他们什么关系啊?...); imshow("original",img); imshow("result",cdetect.process(img)); waitKey(0); } 以上这篇python3+openCV 获取图片中文本区域的最小外接矩形实例就是小编分享给大家的全部内容了

1.8K20
领券