JavaScript　坐标计算

最新推荐文章于 2021-09-01 15:14:34 发布
最新推荐文章于 2021-09-01 15:14:34 发布
阅读量1.3k 收藏
点赞数
文章标签： javascript 文档 浏览器 web html css
本文深入解析屏幕坐标、视窗坐标与文档坐标的概念及其在网页开发中的应用，包括它们如何相互作用以及JavaScript操作CSS样式时的坐标系问题。详细解释了鼠标在页面上的位置计算方式，并提供了页面与视窗间距离的获取方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　　屏幕坐标：描述的是桌面上的一个浏览器窗口的位置，他们相对于桌面的左上角来度量                                                                                                  视窗(viewport)坐标：描述的是在WEB浏览器中的视口的位置，相对于视口的左上角度量                                                                                            文档(document)坐标：描述的是一个HTML文档中的位置，相对于文档的左上角度量

　　其中要注意的是文档坐标和窗口坐标的关系。窗口坐标的原点是其视口（往往是WEB页面）的左上角,由于窗口具有滚动条，文档的坐标原点可能会滚动到窗口以外，这时要注意两者的关系。在代码的书写过程中要注意的是JavaScript的AIP返回的值是基于什么坐标系的。在利用javaScript来操纵css style的时候中的时候absolute的坐标是相对于document坐标系的。

　　鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置

    （如下图：cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)，W3C通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离）

　　







 
wangxiaohu__
关注
html map坐标计算方法,HTML热区map坐标，随窗口大小自适应办法（javascript）
weixin_34434948的博客
05-31 1090
为图片添加MAP：/>/>/>/>图片大小随页面变化，需要MAP中每个area的坐标也随页面等比例变化。Javascript实现：adjust();var timeout = null;//onresize触发次数过多，设置定时器window.onresize = function () {clearTimeout(timeout);timeout = setTimeout...
二叉树坐标计算
wwj_bupt
04-24 1103
数据结构与算法分析——c语言描述 练习4.33 答案 只是计算完坐标，还没写展示。有空在把展示写了。 #include"fatal.h" #include typedef int ElementType; struct AvlNode; typedef struct AvlNode *Position; typedef struct AvlNode *AvlTree; s
js几何坐标计算（点到线，面。点是否在线、面）
10-17
js几何坐标计算（两点之间的距离，点到线，面之间的距离。点是否在线、面上，坐标转化，方位角计算。。。。）
js计算鼠标坐标
一路追寻的专栏
03-17 166
刚在网上搜了一个计算鼠标坐标的方法，记下来。 function getMousePoint(ev) { // 定义鼠标在视窗中的位置 var point = { x:0, y:0 }; // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 if(typeof window.pa...
js获取你的坐标
xm的博客
03-20 539
前提要引入百度API： <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> html <body> <p id="demo">点击这个按钮，获得您的坐标：</p> &lt
高斯投影坐标正反算JS实现（代码有谬误，请勿使用）
07-04
正算经度0.001m，反算经度0.0001“ 正算公式： N_metre = X + N * tB * Math.pow(cB * l, 2) / 2 + N * tB * (5 - Math.pow(tB, 2) + 9 * itaf + 4 * Math.pow(itaf, 2)) * Math.pow(cB * l, 4) / 24 + N * tB * (61 - 58 * Math.pow(tB, 2) + Math.pow(tB, 4)) * Math.pow(cB * l, 6) / 720; E_metre = N * cB * l + N * (1 - Math.pow(tB, 2) + itaf) * Math.pow(cB * l, 3) / 6 + N * (5 - 18 * Math.pow(tB, 2) + Math.pow(tB, 4) + 14 * itaf - 58 * itaf * Math.pow(tB, 2)) * Math.pow(cB * l, 5) / 120 + 500000; 反算公式： B_degree = Bf - tBf * Math.pow(y, 2) / (2 * Mf * Nf) + tBf * (5 + 3 * Math.pow(tBf, 2) + itaff - 9 * itaff * Math.pow(tBf, 2)) * Math.pow(y, 4) / (24 * Mf * Math.pow(Nf, 3)) - tBf * (61 + 90 * Math.pow(tBf, 2) + 45 * Math.pow(tBf, 4)) * Math.pow(y, 6) / (720 * Mf * Math.pow(Nf, 5)); L_degree = y / (Nf * cBf) - (1 + 2 * Math.pow(tBf, 2) + itaff) * Math.pow(y, 3) / (6 * Math.pow(Nf, 3) * cBf) + (5 + 28 * Math.pow(tBf, 2) + 24 * Math.pow(tBf, 4) + 6 * itaff + 8 * itaff * Math.pow(tBf, 2)) * Math.pow(y, 5) / (120 * Math.pow(Nf, 5) * cBf); 参考资料：孔祥元,郭际明,刘宗泉.大地测量学基础
js 实现 通过两点坐标计算直线距离
03-30
js 实现 通过两点坐标计算直线距离! 值得下载看看!资源免费,大家分享!!
javascript 坐标转换 高德 火星 百度 wgs84 相互转换
最新发布
02-06
实现前端JavaScript中的坐标转换是一个复杂但必要的过程，它能够帮助开发者在不同的地图系统间进行准确的位置计算和定位。通过了解和掌握这些转换方法和技巧，能够更加有效地处理与地理信息相关的前端开发任务。
JavaScript 页面坐标相关知识整理
10-29
在网页开发中，JavaScript 提供了一系列属性和方法来处理页面元素的坐标和位置，这对于动态布局和交互设计至关重要。本文将深入探讨这些知识点，帮助开发者更好地理解和应用。 首先，`offsetTop` 和 `style.top` 是...
HTML5与JavaScript实现向量坐标计算指南
而JavaScript，作为客户端的脚本语言，除了控制DOM之外，还可以用来处理数学计算，比如向量坐标计算。向量计算在图形学中有着重要的应用，特别是在处理图形的移动、旋转和缩放等操作时。 向量基础概念： 在数学中，...
JavaScript 空间坐标的使用
10-14
另外，可以通过`window.pageXOffset`和`window.pageYOffset`获取滚动条的当前位置，以便计算视口坐标。 在处理几何形状时，JavaScript提供了一系列方法来获取元素的几何信息： - `getBoundingClientRect()`：返回...
原生JS实现树状图布局算法.zip
08-24
该算法用原生的javascript完成了树布局的算法，同时也完成了大规模数据测试，在算法上肯定没有任何问题。同时还支持了垂直树布局
javascript 计算两个坐标的距离 米_使用WGIS的字段计算器
weixin_39912250的博客
10-28 459
WGIS的字段计算器（Field Calculator）跟其他桌面GIS软件的字段计算器类似，计算公式/脚本采用JavaScript进行书写。1.为什么使用字段计算器字段计算器可以批量对数据表进行操作，是一种非常快速高效的计算工具。与Excel的公式类似，但公式的写法略有不同。比如我们有上千条数据内容需要更新，而这些更新是基于其他字段就可以自动识别的，那么，利用字段计算器就可以在1秒之内（或很短时...
js里面关于位置坐标的总结
adobe1992
07-25 1045
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
播放视频,播放音质，计算坐标
11-30 152
1.播放视频 <videowidth="1000px"height="400px"controls="controls"><sourcesrc="../video/1.mp4"></video> 2.播放音质 <audiosrc="../video/1.mp4"controls="controls
点关于直线对称的点的求法_重温初中数学：点关于直线的对称点
weixin_39903571的博客
11-28 2403
这两天遇到了一个初中问题：有两个点表示一个直线 ，现有第三个点要求该点关于直线的对称点如图所示，已知 三点，求 点关于 两点组成的直线的对称点 的坐标首先给出效果：重温初中数学：点关于直线的对称点 - JSRUN​jsrun.pro这里不直接求 点坐标 ，而是求 中点 的坐标，由于是中点，满足 求出 就能得到对称点坐标然后用了两个性质，一是直线的两点式方程，由于点 在直线 ...
连续坐标折线中点计算
weixin_42253577的博客
09-01 834
lineCenter(points){ let total = 0, lens = []; for (let i = 1; i < points.length; i++) { let len = Math.sqrt(Math.pow(points[i][0]-points[i-1][0],2)+Math.pow(points[i][1]-points[i-1][1],2)); lens.push...
js 画树状图 如何确定各个点的位置_聚类分析：如何优雅地分类
weixin_33188789的博客
12-09 734
点击下方领取大碗宽面指南：▼【导入】“五一”旅游和聚类分析【理论】那什么是聚类分析呢？【实例】中国科创城市的聚类分析五一到了，小张和小红打算去旅游。但他们还没决定去哪里...为了让问题更简单，我们假设：作为又穷又宅的学生党，小张选择目的地的依据是人流量和价格于是，小红给小张一张表格，列出了5个她想去的地方，以及对应的人流量和价格。作为上过计量经济学的普通学生，小张先是画了个散点图观察一下...
一种对树状结构的坐标格式化算法
weixin_30706507的博客
07-20 859
因为工作需要，重新回顾了一年前写的代码，看的时候一点印象也没，老了。。。 树，除了根节点外，所有节点只有一个父节点，称为树。 树，怎样才能称之为好看，拿张草稿纸画了画，得出下述结论： 按层分隔，层间距一致 节点连线不重合，即要求同一层中，节点按父节点的顺序摆放。同一层中，节点间距最好满足 1*gap、2*gap、3*gap..... 父节点的坐标在子节点的中间位置（x轴方向上），对称。 分析...
前端开发必备：JavaScript坐标与距离计算全解析
在JavaScript编程中，坐标和距离的概念在前端开发中扮演着重要的角色，尤其是在处理用户界面交互、动画效果以及定位元素位置时。本文将详细介绍如何在JavaScript中理解和使用与坐标和距离相关的属性和方法。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值