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

js获取鼠标当前位置坐标

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

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

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

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或是否全屏幕

1.9K30

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

pyautogui之locateOnScreen图片输出坐标

最近在做PC端应用程序自动化测试,由于程序是C++和VB结合的,使用工具无法像做APP自动化那样实现元素定位,且有些页面无法获取元素,故无意中发现了Python一个神奇的库:pyautogui。...使用pyautogui可实现对页面图片坐标定位,这样就解决了当一个页面存在多个元素且无法或者元素坐标的问题。...一、环境准备 1、安装并导入pyautogui库 pip install pyautogui import pyautogui as auto 2、准备需要识别的图片 ?...二、解决思路 通过已存在的图片,在程序当中找到该图片坐标,为后续提供坐标点操作 三、实现步骤 1、这里应用程序图就不贴出来了(你懂得),图片在项目中的路径 ?...这样就实现了图片坐标问题,为后续开展自动化测试工作提供了有力支撑。

7K21

获取鼠标坐标以及按键响应

当鼠标在窗口之外如何获取屏幕位置 4.源码下载地址 1.原理 重写GUI类中的鼠标事件的响应函数,并实现其响应函数。 要包含头文件#include 1.1效果 ?...当鼠标在窗口之外如何获取屏幕位置 当鼠标移动出窗体,鼠标就无法进入mouseMoveEvent()函数,此时就需要通过其他方式获取鼠标在屏幕上的位置信息。...这里用到了这个QCursor类,这个类中有一个获取鼠标当前屏幕位置(绝对位置)的一个静态方法。...static QPoint QCursor::pos(const QScreen * screen) 我在这里的处理方式是,通过按键盘的Ctrl键,获取当前的鼠标的绝对位置,需要实现键盘的按键响应函数,...QPoint pt = QCursor::pos();//获取鼠标的绝对位置 QString str; str = QString("%1 , %2").arg(pt.x()).arg(pt.y

4.3K31

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券