Javascript / jQuery - 将一个数字范围映射到另一个数字范围

2023-12-28

在其他编程语言(例如处理)中,有一个函数允许您将某个数字范围内的数字转换为不同范围内的数字。我想要做的是将鼠标的 X 坐标转换为 0 到 15 之间的范围。因此,浏览器的窗口尺寸虽然每个用户都不同,但可能是 1394px 宽,当前的 X 坐标可能是 563px ,我想将其转换为 0 到 15 的范围。

我希望找到一个内置了这种能力的 jquery 和 javascript 函数。我可以自己算出数学来做到这一点,但我宁愿以更简洁和动态的方式来做到这一点。

我已经使用以下代码捕获屏幕尺寸和鼠标尺寸:

var $window = $(window);
var $document = $(document);


$document.ready(function() {
    var mouseX, mouseY; //capture current mouse coordinates
    var screenW, screenH; //capture the current width and height of the window
    var maxMove = 10;
    windowSize();

    $document.mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;

    });

    $window.resize(function() {
        windowSize();
    });

    function windowSize(){
        screenW = $window.width();
        screenH = $window.height();
    }

});

感谢您的任何帮助,您可以提供。


您可以将其实现为纯 Javascript 函数:

function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}

使用该函数,如下所示:

const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

我在用着scale对于函数名称,因为map经常与数组和对象的迭代相关。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript / jQuery - 将一个数字范围映射到另一个数字范围 的相关文章

  • JavaScript 相当于 Python 的参数化 string.format() 函数

    这是 Python 示例 gt gt gt Coordinates latitude longitude format latitude 37 24N longitude 115 81W Coordinates 37 24N 115 81W
  • UpdatePanel 破坏 JQuery 脚本

    这是我想做的事情的简化版本 基本上我有一个数据列表 里面有很多东西 当你将鼠标悬停在数据列表中的项目上时 我希望 jquery 隐藏 显示东西 问题是 在我进行数据绑定后 如果 gridview repeater datalist 位于更新
  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • iphone jquery 移动闪烁问题

    我在 iPhone 上使用使用 jQuery mobile 开发的应用程序时遇到闪烁问题 我尝试了互联网上提供的几种解决方案 包括 CSS 更改 将过渡设置为 无 甚至在 jquerymobile js 中注释代码 但没有运气 我使用的 J
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 为什么 call 比 apply 快那么多?

    我想知道是否有人知道why call比apply 在 Chrome 中 速度大约快 4 倍 在 Firefox 中快 30 倍 我什至可以制作自定义原型 apply2 在大多数情况下 运行速度是apply 这个想法取自角度 Function
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • 如何解决“消息端口在收到响应之前已关闭”的问题。在 JavaScript 中的 window.location.reload() 之后

    我遇到了 javascript 问题 从 chrome v73 0 3683 86 开始 每当我在 window location reload 函数之后运行 javascript 代码时 它总是给我错误 Unchecked runtime
  • 如何跨多个文件跨越 javascript 命名空间?

    我永远忽略了javascript 几年前我开始使用 jQuery 这样我就可以过得去 但随着我开始更多地进行 TDD 我昨天决定真正深入研究 javascript 之后可能还有咖啡脚本 在我的 ASP NET Web 窗体应用程序中 我有很
  • Graphql 将多个查询合并(组合)为一个?

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询
  • jQuery Mobile + Admob:轮换?

    我使用 jQuery Mobile 框架创建了一个移动应用程序 所有页面都在index php中加载 使用 div 在每个页面的页脚中 我添加了Admob代码 div div div
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ?

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这

随机推荐

  • 为什么标准化设备坐标系是左手坐标系?

    起初我想知道为什么 NDC 的范围是从 1 到 1 而不是从 0 到 1 我想也许将原点放在中心是有用的 但为什么它使用左手坐标系呢 是否只是距离较远的物体 Z 值较高 这对我来说已经是一个足够好的理由了 但为什么它使用左手坐标系呢 让我们
  • 将 JPA query.getResultList() 转换为 MY 对象

    我正在对我的数据库执行查询JPA 该查询 查询 4 个表 结果聚合来自不同表的列 我的查询是这样的 Query query em createQuery SELECT o A o B o C e D c E FROM Table1 o Ta
  • 使用 SmtpClient 发送邮件作为回复

    场景 需要发送一封邮件 该邮件实际上是来自 asp net c 程序的回复邮件 我设法将邮件发送给客户端 但它作为新邮件发送 Code var SMTP genRepository GetData SELECT FROM LOCATION
  • 修改 xargs 中的替换字符串

    当我使用时xargs有时我不需要显式使用替换字符串 find name txt xargs rm rf 在其他情况下 我想指定替换字符串以便执行以下操作 find name txt xargs I mv foo bar 上一个命令会将当前目
  • Android 应用程序中的所有 Activity 共享一个 SQLiteOpenHelper 实例是否可以?

    将 SQLiteOpenHelper 的单个实例作为子类应用程序的成员 并且让所有需要 SQLiteDatabase 实例的活动从一个帮助器获取它是否可以 单击此处查看我关于此主题的博客文章 http www androiddesignpa
  • Java 可序列化、ObjectInputstream、非阻塞 I/O

    我刚刚开始使用 Java 序列化 我不清楚如何在非阻塞 I O 的场景中从源获取对象 我能找到的所有文档都表明使用 ObjectInputStream 是proper读取序列化对象的方法 但是 正如我提到的 我正在使用 java nio 并
  • DAO架构的必要性是什么

    当用Java编程时 是否总是需要根据DAO架构来编码 如果是的话 使用它有什么好处 我正在做一个项目 其类图如下所示 这样做有什么缺点 实体类 private void fillSONumber try ZnAlSalesOrder o n
  • 相同变音符号(变音符号)的不同 UTF-8 签名 - 编写变音符号的 2 种二进制方法

    我有一个很大的问题 我在网上找不到任何帮助 我将一个网站的页面从 OSX 移至 Linux 两个系统都在 de DE UTF 8 中运行 并遇到了一个相当未知的问题 有些文件不再被发现 但显然以 明显 相同的名称存在于硬盘上 所有这些文件都
  • Flink 作业在集群节点上的分布

    我们有 4 个作业 运行在 3 个节点上 每个节点有 4 个槽位 在 Flink 1 3 2 上 作业均匀分布在每个节点上 升级到 flink 1 5 后 每个作业都在单个节点上运行 如果没有剩余插槽 则可以转移到另一个节点 有没有办法恢复
  • 如何在WP8中引用System.Net.Http?

    我对 WP8 开发相对较新 并且遇到了一个我无法解决的问题 即使经过几个小时的谷歌搜索后也是如此 我正在使用 Visual Studio 2012 并使用 NuGet 实现了 System Net Http 已检查引用 复制本地设置为 tr
  • 无法在 IIS 7 Windows Server 2008 64 位上运行经典 ASP

    我们有几个用经典 ASP 构建的 Web 应用程序 目前在 Windows Server 2003 32 位和 IIS 6 上运行 我们正在尝试将其迁移到运行带有 IIS 7 的 Windows Server 2008 64 位的新服务器
  • 可以在命令行上指定额外的插件目录吗

    使用 Eclipse 3 4 是否可以从命令行提供附加插件目录 就像是 eclipse plugin dir D myproduct V1 1 plugins clean 这只是为了节省每次插件的复制 虽然可以使用脚本完成复制 但用户可能没
  • 通过 TensorFlow 中 CSV 的分类特征数组列创建多热 SparseTensor

    这是推荐系统中处理稀疏特征 例如一些ID特征 的典型方式 我正在寻找一种方便的方法来为 TensorFlow 管道准备数据 我做了很多搜索 但尚未找到好的解决方案 下面是似乎接近我需要的 但尚未工作 See 下面的部分 数据文件如下 csv
  • Q_ENUMS 在 QML 中“未定义”?

    枚举不适合我 我已将它们注册为Q ENUMS 我没有忘记Q OBJECT macro 该类型是使用注册的qmlRegisterType 该模块在 QML 中导入 简而言之 一切都是 按规矩 但由于某种原因我继续得到undefined对于 Q
  • 结合 guava eventbus 和 AWT 事件线程处理的最佳方式

    当您有异步事件总线并触发事件时 假设在 UI 中捕获的模型中 您可能会遇到以下问题 注册的处理程序在工作线程中执行 但所有 UI 摆动更改都需要在 AWT 事件线程中执行 这意味着您需要将所有处理程序 clode 封装起来EventQueu
  • Matlab - 根据regionprops过滤标记矩阵

    我已经标记了一张图像 使用bwlabel 之后 我用了regionprops获取标记对象的偏心率 我现在要做的是过滤每个偏心率小于 0 5 的标记对象 到目前为止 我已经能够使用find获取符合条件的区域的数量 但我不知道如何使用它们来过滤
  • 还有其他人在设计 Twitter Typeahead 的搜索栏时遇到过问题吗?

    我在设计 Twitter Typeahead 的搜索栏时遇到了非常困难的问题 添加 Typeahead javascript 似乎向我的搜索栏添加了三个新类 twitter typeahead tt hint and tt input 每个
  • 存在构造函数的模式绑定

    作为一名以前接触过 Lisp 的程序员 在编写 Haskell 时 我注意到了一些奇怪的东西 但我无法理解 这编译得很好 LANGUAGE NamedFieldPuns LANGUAGE ExistentialQuantification
  • urllib2 和 cookielib 线程安全

    据我所知 cookielib 不是线程安全的 但话又说回来 这篇文章已经有五年了 所以它可能是错误的 尽管如此 我一直想知道 如果我生成一个这样的类 class Acc jar cookielib CookieJar cookie urll
  • Javascript / jQuery - 将一个数字范围映射到另一个数字范围

    在其他编程语言 例如处理 中 有一个函数允许您将某个数字范围内的数字转换为不同范围内的数字 我想要做的是将鼠标的 X 坐标转换为 0 到 15 之间的范围 因此 浏览器的窗口尺寸虽然每个用户都不同 但可能是 1394px 宽 当前的 X 坐