首页
学习
活动
专区
工具
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.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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宽和高 需要注意是在给imgsrc赋值时,这是一个异步过程,会存在获取img宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

    6.3K20

    node.js获取图片文件真实类型

    遇到一个需求:假定有一个图片文件,真实类型为jpg,而有人偷懒把jpg直接复制一张,存为同名png文件,这样在as3读取文件时不会遇到问题,但手机c++在读取文件时却遇到问题了 - -!...现在就需要写一个程序,遍历所有文件夹下文件,查找文件格式“不正常”文件。...我们资源主要是gif、png、jpg,最开始,我到网上找到一篇文章:根据二进制流及文件头获取文件类型mime-type,然后读取文件二进制头信息,获取其真实文件类型,对与通过后缀名获得文件类型进行比较...'; showLog(msg); g_errorFileTypArr.push(msg); } 后来搜索node image相关信息时,找到这篇文章:node.js module ranking...它源码,有兴趣可以研究一下: function readUInt32(buffer, offset, bigEndian) { if (buffer.readUInt32) {

    6.1K30

    Android MotionEvent 坐标获取

    Android MotionEvent中getX()与getRawX()都是获取屏幕坐标(横),但二者又有区别 getX()           :   是获取相对当前控件(View)坐标...getRawX()   :   是获取相对显示屏幕左上角坐标 演示示例代码 Java代码: public class MainActivity extends Activity implements...点击屏幕中间Button,获取坐标信息: ?...结果说明: x,y  :  分别获取相对Button控件坐标 getX(), getY() rawX,rawY  : 分别获取相对显示屏幕左上角坐标 getRawX(), getRawY() 总结...:  getX() 是表示Widget相对于自身左上角x坐标,而getRawX()是表示相对于屏幕左上角x坐标值(注意:这个屏幕左上角是手机屏幕左上角,不管activity是否有titleBar或是否全屏幕

    2.1K30

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

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

    3.8K30

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

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

    2.5K10

    pyautogui之locateOnScreen图片输出坐标

    最近在做PC端应用程序自动化测试,由于程序是C++和VB结合,使用工具无法像做APP自动化那样实现元素定位,且有些页面无法获取元素,故无意中发现了Python一个神奇库:pyautogui。...使用pyautogui可实现对页面图片坐标定位,这样就解决了当一个页面存在多个元素且无法或者元素坐标的问题。...二、解决思路 通过已存在图片,在程序当中找到该图片坐标,为后续提供坐标点操作 三、实现步骤 1、这里应用程序图就不贴出来了(你懂得),图片在项目中路径 ?.../img/2.png') # 传入按钮图片 print(number1_location) # 返回屏幕所在位置 x, y = auto.center(number1...这样就实现了图片坐标问题,为后续开展自动化测试工作提供了有力支撑。

    7.4K21

    React技巧获取鼠标坐标位置

    为了得到相对于页面上某个元素鼠标坐标,我们必须从clientX减去offsetLeft,从clientY减去offsetTop。...offsetTop属性返回当前元素外边界相对于,位置最近祖先元素内边界之间像素数。 clientX属性返回事件发生时,在应用程序视口中水平坐标。...clientY属性返回事件发生时,在应用程序视口中垂直坐标。 监听鼠标事件 第二个示例向我们展示了,为了得到全局鼠标坐标,如何在window对象上监听mousemove事件。...清理步骤很重要,因为我们要确保我们应用程序中没有任何内存泄漏。 screenX/Y属性 screenX属性返回全局坐标中鼠标的水平坐标(偏移)。...screenY属性返回全局坐标中鼠标的垂直坐标(偏移)。

    2.3K20

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

    获取页面中元素到文档区域document横向、纵向坐标的两种方法及其比较 在js控制元素运动过程中,对于页面元素坐标位置获取是经常用到,这里主要总结下两种方法: 一:通过叠加元素对象和它offsetParent...所以,要得到元素到文档区域坐标位置,只需通过while循环不断获取offsetParentoffsetLeft/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.6K30
    领券