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

『Three.js』辅助坐标

本文简介 点赞 + 关注 + 收藏 = 学会了 在日常开发和学习坐标轴能粗略的帮我们定位元素位置和关系。所以我使用 Three.js 学习和开发时基本都会打开坐标轴。...本文使用 Three.js 的版本:137 编码 在使用坐标轴之前,我们先创建一个元素,可以让我们更容易理解坐标轴。.../js/Three/Three.js' // 省略部分代码... // 创建坐标轴 const axes = new AxesHelper() // 将坐标轴添加到场景 scene.add...const axes = new AxesHelper(2) 此时的坐标轴看上去就比之前长很多了。 设置坐标轴颜色 从上面的案例可以发现,坐标轴默认的颜色是:红、绿、蓝。...这两种情况建议你自己手动测试,我在这里就不贴代码了~ 代码仓库 ⭐Three.js 坐标

2.2K20

学习《JavaScript设计模式与开发实践》- 单例模式

在下面的例子,我们将使用 CreateDiv 单例类,它的作用是负责在页面创建唯一的 div 节点,代码如下: var CreateDiv = (function(){ var instance...代理实现单例模式 现在我们 把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 。...由于js是一门无类语音,所以创建实例并不需要那么麻烦,但依然需要注意全局对象容易被污染这一情况 使用命名空间 使用闭包封装私有变量 通用惰性单例 所谓通用的惰性单例,实际上就是将管理单例对象和创建单例对象的逻辑分离开来...var loginLayer = createSingleLoginLayer(); loginLayer.style.display = 'block'; }; 最后 本文介绍了JS...设计模式的代理模式的三种情况...

30310

JavaScript设计模式 单例模式

先看一下,在Js中使用传统面向对象的单例模式。 面向对象的单例模式,是通过new关键字来实例化我们想要的对象,并将其赋值给instance。...代理类是属于代理模式的应用,会在代理模式详细学习。...在JS的世界,是不存在实质的可使用的类的,上面的只是模仿面向对象语言的实现方法,但Js有全局变量的特性,虽然它不是单例模式,但通常可以把全局变量当作单例模式来使用,如上面的例子可以修改为如下: 将instance...在上面的面向对象开发单例模式的例子,采用的就是懒惰单例,当用户第一次new代理类时,才开始实例化CreateDiv类。...因为result变量在闭包,所以永远不会被销毁。

47410

javascript设计模式一: 单例模式

作为一个半路出家的前端,随着项目经验的积累,也越来越意识到原生js的博大精深,最近正在研究js设计模式,接下来每学一个设计模式就是写篇文章做笔记,其实主要还是代码和设计思想的结合,努力体会,多思考合适自己项目中的应用场景...话不多说,进入主题,js设计模式之:单例模式 单例模式定义: 保证一个类仅有一个实例,并提供一个访问它的全局访问点 上代码: 标准单例模式 //方法1 //标准单例模式 var Singleton =...透明单例模式 //方法二 //透明的单例模式,用户从这个类创建对象时,可以像使用其他任何普通类一样,通过new创建类实例。下面单例类的作用是在页面创建唯一的div节点。...CreateDiv方法负责两件事,一件是创建对象和执行初始化init方法,第二是保证只有一个对象。...这样CreateDiv就是一个普通类。

46220

JS常用设计模式解析01-单例模式

; })(); var a = new CreateDiv('html1'); var b = new CreateDiv('html2'); // 证明该对象仅可被实例化一次 console.log...为了把instance封装起来,我们使用了自执行的匿名函数和闭包,并且在这个匿名函数实现真正的Singleton构造方法和原型逻辑,这让代码的可维护性变差。...另外,CreateDiv的构造函数负责了两件事情。1.创建对像和执行初始化init方法,第二是保证只有一个对象。这违背了设计模式的单一职责的原则。...{html: "html1"} 参考 BOOK-《JavaScript设计模式与开发实践》 第4章 Javascript设计模式详解 【原】常用的javascript设计模式 js设计模式 [...译] 你应了解的4种JS设计模式 深入理解javascript之设计模式 JavaScript实现单例模式 JavaScript设计模式----单例模式

66121

2D坐标绘制旋转的椭圆-坐标变换

另外,矩阵乘法一般有硬件支持,比如3D 图形加速卡,处理3D变换的大量矩阵运算,比普通CPU 要快上1000倍。 下面是3类基本的2D图形变换。...平移: 设某点向x方向移动 dx, y方向移动 dy ,[x,y]为变换前坐标, [X,Y]为变换后坐标。...dx dy 1 旋转: 旋转相比平移稍稍复杂: 设某点与原点连线和X轴夹角为b度,以原点为圆心,逆时针转过a度 , 原点与该点连线长度为R, [x,y]为变换前坐标, [X,Y]为变换后坐标...0 0 1 缩放 设某点坐标,在x轴方向扩大 sx倍,y轴方向扩大 sy倍,[x,y]为变换前坐标, [X,Y]为变换后坐标。...《(计算)流体力学》的几个小程序,可在微信中点击体验: Blasius偏微分方程求解速度边界层 (理论这里) 理想流体在管道的有势流动 (源码戳这) 涡量-流函数法求解顶驱方腔流动

1K10

SETTLE约束算法坐标变换问题

技术背景 在之前的两篇文章,我们分别讲解了SETTLE算法的原理和基本实现和SETTLE约束算法的批量化处理。...本文我们需要探讨的是该约束算法的一个细节,问题是这样定义的,给定坐标系XYZ下的两个已知三角形 和三角形 ,以三角形 构造一个平面 ,将 平移到三角形 的质心位置,作为新坐标系的...这样一来通过上一个章节的旋转矩阵的构造方法,我们就可以计算出所有的向量在两个坐标系下的旋转变换。...比如我们上述python代码的24、25、26都是对红色三角形的三个顶点关于质心的相对位置的坐标变换,在坐标变换前后,顶点坐标都需要减去质心的坐标。...如果是常规思路,可以先根据两个三角形之间的相对位置去计算一下在新坐标系下两个三角形的新的顶点坐标,从而可以取三个点来构造一个坐标变换矩阵,进而推广到所有向量在这两个坐标系之间的变换关系。

2.2K20

数字孪生园区场景坐标知识

② 在场景需要什么信息才能确定某个对象的位置?本期我们重点讲解一下园区场景坐标知识。...对比看看 3DsMax 里的坐标系:可以看出如果要把 Max 里的坐标 [x1,y1,z1] 转换到 ThingJS 需要 y 与z 互换后再取反,如下图:轴心点园区里摆放的物体可能是规则的,也可能是不规则的...使用场景:物体是独立的,它的运动不受场景其他物体的影响,只和整个场景有关系。...2、父物体坐标系当在场景创建了园区,在园区下放置一个飞机,飞机是园区的子物体,想在园区的坐标系下,设置飞机的位置,这时使用的园区的坐标系,就是飞机的父物体坐标系。...PS:当场景只有一个园区时,以园区为参考建立的坐标系 = 世界坐标系,也就是说:飞机在世界坐标系的坐标和父物体下的坐标值是一致的。

54420

眼动追踪坐标+追踪原理

主动显示坐标系 (ADCS) 大多数描述 3D 空间坐标的数据,来自 Tobii 的基于屏幕的眼动仪,都在所谓的用户坐标系或简称 UCS 给出。...在 SDK ,有一些方法可以找出轨道盒体积的大小和位置,以及眼睛在其中的位置。用于描述眼睛在轨迹框内的位置的坐标系称为轨迹框坐标系(TBCS)。...三个浮点值分别用于描述 x、y 和 z 坐标。对于基于屏幕的眼动仪,位置总是在用户坐标描述,有时在跟踪框坐标。...注视点的坐标在用户坐标作为 3D 点给出,在活动显示坐标作为归一化的 2D 点给出。 凝视矢量 对于基于 HMD 的眼动仪,没有活动显示区域,因此无法计算注视点(如上所述)。...结合上面的一些坐标空间的概念就可以看到这个东西的意思啦 我之前写过一个pupill的眼动仪,这个是单眼追踪的方案 (A)当以球形坐标表示地面真实注视方向dgt时,可以将其可视化为球体上的一个点(参见上下面板的蓝色圆盘

1.4K50

Threejs入门之二十二:Threejs的屏幕坐标转标准设备坐标

在上一节,我们在监听鼠标移动事件时,将其坐标范围处理为了[-1,1]的范围,使用如下代码document.addEventListener('mousemove',function( event )...标准坐标系我们之所以要进行上面的转换,这是因为在Three.jsCanvas画布具有一个标准设备坐标系,该坐标系的坐标原点在canvas画布的中间位置,x轴水平向右,y轴竖直向上。...HTML坐标系有前端基础的人都知道HTML中有四个坐标系,分别是screen,page,client和offset,他们用于描述DOM元素的Box尺寸和MouseEvent的位置 1 screen...4 offset 坐标原点:父级中最近的一个带有CSS定位(position为absolute/relative)的父元素,如果当前元素的父级元素没有进行CSS定位,那么就是body。...event.offsetX const oy = event.offsetY const cx = event.clientX const cy = event.clientY})屏幕坐标转换标准设备坐标在项目开发

1.9K10

D3.js库-7-坐标轴的使用

D3.js库-7-添加坐标坐标坐标轴是可视化图表中经常出现的一种图形,由一些刻度和线列段组成。D3是没有现成的坐标轴,SVG因而没有现成的图形元素,需要通过D3提供的其他组件来手动添加。...坐标轴构成 在SVG画布的预定义元素,有6种基本的图形: 矩形 圆形 椭圆 线段 折线 多边形 还有一种特殊的元素就是:路径path 几乎画布的所有图形都是由以上7种元素构成的。...上述元素没有坐标轴,采用类似的定义方式:将axis看做是一个标签,x1、x2等看做是它的一个个属性 ......D3提供了一个组件能够自动添加:d3.svg.axis() 每个分组g看做是一个刻度值和线段组成的group。 定义一个坐标轴 定义一个坐标轴需要使用上一篇文章中使用的比例尺。...text/javascript" src="http://d3js.org/d3.v5.min.js"> <svg width="960

3.1K10
领券