如何理解JavaScript用三角函数计算鼠标与多个目标点的距离

这个东西理解起来可能有点抽象，下面会用代码和图片的方式帮助大家去更方便的理解。

上图是我画的基本构思图

下面是html结构

<style type="text/css">* {margin: 0;padding: 0;}#div1 {width: 1200px;height: 300px;position: absolute;left: 100px;bottom: 0;text-align: center;border: #000000 5px solid;}.bg {width: 600px;height: 420px;background-image: url(../image/0522/gg.png);background-size: 600px 420px;border: 1px solid #000000;}img {width: 64px;}</style>

<body><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><br><div class="bg"></div><div id="div1"><img src="../image/0522/1.png"><img src="../image/0522/2.png"><img src="../image/0522/3.png"><img src="../image/0522/4.png"><img src="../image/0522/5.png"></div></body>

下面是js代码

<script type="text/javascript">// 利用的是勾股定理var inputs = document.getElementsByTagName('input');var oDiv = document.getElementById('div1');var imgs = oDiv.getElementsByTagName('img');document.onmousemove = function(event) {var env = event || window.event;for (var i = 0; i < imgs.length; i++) {// 算出中心点的坐标//元素到屏幕的距离+元素自身宽度的一半就可以获得中心点let x = imgs[i].offsetLeft + imgs[i].offsetWidth / 2;//offsetTop只能拿到图片从底部到自己的距离还要加上div1的距离let y = imgs[i].offsetTop + imgs[i].offsetHeight / 2 + oDiv.offsetTop;var b = env.clientX - x;var a = env.clientY - y;console.log(b, x, a, y)var c = Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2)) // 勾股定理 通过a边b边求c边的距离// sscale 表示放大比例 var scale = 1 - c / 300;if (scale < 0.5) {scale = 0.5;}inputs[i].value = scale;/* 把设置好的缩放比例赋值给图片 */imgs[i].style.width = scale * 128 + "px";imgs[i].style.height = scale * 128 + "px";}}</script>

上面的代码就是利用勾股定理计算鼠标和斜边的距离来获得不同位置和鼠标的距离

转载于:https://www.cnblogs.com/caominjie/p/10930295.html

如何理解JavaScript用三角函数计算鼠标与多个目标点的距离相关推荐

使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节查看作业目录需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
深入理解JavaScript定时机制
容易欺骗别人感情的JavaScript定时器本文地址: http://www.laruence.com/2009/09/23/1089.html 转载文章 JavaScript的setTimeout ...
全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...
全面理解Javascript闭包和闭包的几种写法及用途好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...
深入理解JavaScript系列（5）：强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
javascript 符号_理解JavaScript中“ =”符号的直观指南
javascript 符号 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 理解JavaScript中" ="符号的直观指南 (A Visu ...
html GPS坐标实现,JavaScript 实现GPS坐标点距离计算（两个经/纬度间的距离计算）...
在LBS(基于位置服务)的一些应用中,有时我们会需要计算两个用户或两个坐标点之间的距离.要解决这类问题,就要了解空间几何的概念并结合数学中在三角函数公式计算两点之间的值.本文介绍基于经度/纬度的,两个 ...
深入理解JavaScript系列：闭包（Closures）
介绍本章我们将介绍在JavaScript里大家经常来讨论的话题 -- 闭包(closure).闭包其实大家都已经谈烂了.尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭 ...
深入理解JavaScript系列：This? Yes,this!
介绍在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字.实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题. 许多程序员习惯的认为,在程序语言中 ...
javascript实现窗口随着鼠标移动且移动路径重现
现在实现一个挺有趣的示例,页面中出现一个窗口,鼠标在窗口指定位置区域内按下拖动,窗口会随着鼠标一起移动,松开鼠标,停止移动,点击"轨迹重现",窗口会自动走一遍移动路径.请看代码: ...

如何理解JavaScript用三角函数计算鼠标与多个目标点的距离

如何理解JavaScript用三角函数计算鼠标与多个目标点的距离相关推荐

最新文章

热门文章