javascript从X,Y到X1,Y1的平滑动画

2023-12-24

我想慢慢地将图像(或元素)从其实际的 X、Y 位置移动到 X1、Y1。

当。。。的时候distanceX 和 X1 之间is equalY 和 Y1 之间的那个很容易。 但是,如果 X 差异为 100 像素,Y 差异为 273 像素怎么办?

作为 Javascript 新手,我不想重新发明轮子! 此外,由于我正在学习,我不想使用 jQuery 或类似的东西。我想要纯JavaScript。

请提供简单的脚本:-)


一种解决方案:

function translate( elem, x, y ) {
    var left = parseInt( css( elem, 'left' ), 10 ),
        top = parseInt( css( elem, 'top' ), 10 ),
        dx = left - x,
        dy = top - y,
        i = 1,
        count = 20,
        delay = 20;

    function loop() {
        if ( i >= count ) { return; }
        i += 1;
        elem.style.left = ( left - ( dx * i / count ) ).toFixed( 0 ) + 'px';
        elem.style.top = ( top - ( dy * i / count ) ).toFixed( 0 ) + 'px';
        setTimeout( loop, delay );
    }

    loop();
}

function css( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}

现场演示: http://jsfiddle.net/qEVVT/1/ http://jsfiddle.net/qEVVT/1/

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

javascript从X,Y到X1,Y1的平滑动画 的相关文章

  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla
  • 使用 jest 测试 catch 块

    我如何测试下面我使用类的代码片段中的 catch 块 示例 js class Sample constructor data this resolvedData this retrieveData data retrieveData dat
  • 为什么用 < 对 JS 数字数组进行排序有效?

    在 JavaScript 中对数字数组进行排序时 我不小心使用了 lt 代替通常 https stackoverflow com questions 1063007 how to sort an array of integers corr
  • 单击链接时如何将另一个 JSP 页面注入到

    我在一个JSP页面中有两个不同的部分 其中一个包含链接菜单 单击时 div2 id content 会相应加载不同的页面 我正在做类似的事情 div ul class navbar li a href Login jsp Login a l
  • 图像在 IE8 中不显示

    在我的网站上 http appliedcodingtech com site factory automation photos http appliedcodingtech com site factory automation phot
  • Node.js 中的 SetTimeout 问题

    我有以下代码 它在 Chrome V8 下运行良好 但在节点内失败 var id id setTimeout TimeoutHandler 10 console log SET function TimeoutHandler clearTi
  • 使用 javascript/jquery 检查 .css 样式表的名称

    我正在尝试为论坛制作一个小 chrome 扩展 但我只希望它在论坛的某个区域中工作 问题是我不能只做 matches subforum 因为该论坛中的线程无法通过 URL 区分它们所在的子论坛 subforum 有自己的 css 样式表 所
  • onbeforeunload 或单击浏览器后退按钮需要帮助

    如果用户单击浏览器的后退按钮 那么我希望出现提示并要求确认 如果用户单击 确定 那么它应该导航到xx html 如果用户单击 取消 则应阻止导航 我怎样才能做到这一点 注意 我已经尝试过onbeforeunload方法 但它适用于所有导航操
  • Django CBV表单提交返回的JSON显示为新页面

    我正在使用 Django 3 2 我正在创建一个简单的时事通讯订阅表格 表单提交将 JSON 返回到前端 然后应该使用前端来更新页面的部分内容 但是 当我发布表单时 JSON 字符串将在新页面上显示为文本 这是调用视图的路由 urlpatt
  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on
  • 在OpenCV Python中编写4通道以上图像

    这对我来说是一个持续的挑战 我正在尝试使用 openCV 将两个 3 RGB 图像组合成一个 6 通道 TIFF 图像 到目前为止我的代码如下 import cv2 import numpy as np im1 cv2 imread im1
  • 如何沿着 Parse Promise 链传递额外数据[重复]

    这个问题在这里已经有答案了 在我的 Parse Cloude 代码中 我需要运行几个连续的查询 每个查询都使用 find Example var promise firstQuery get objectId then function r
  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index
  • PhoneGap文件传输错误1、哪里写FileTransfers?

    相关 https stackoverflow com questions 21044197 download file and store them locally in sdcard using phonegapbuild https s
  • 算法挑战:从图像生成配色方案

    背景 因此 我正在开发一个网络应用程序的新版本 而且 我们发现我们的用户非常懒惰 实在是太懒了 事实上 我们为他们做的工作越多 他们就越喜欢这项服务 现有应用程序的一部分要求用户选择要使用的配色方案 但是 我们有一张图片 用户网站的截图 为
  • 有没有办法避开 Google 路线中的特定道路或坐标?

    API 有一个航路点参数 以便 API 计算经过指定航路点的路线 有什么方法可以给出要避开的航路点而不是要经过的航路点 它 目前 尚未实施 有一个开放的功能请求 问题 214 影响方向的能力 例如 避免 路障 https code goog
  • 如何在 jest 中测试调用和应用函数?

    这是我的callnapply js file const callAndApply caller object method nameArg ageArg tShirtSizeArg method call object nameArg a
  • 无法使用 javascript 建立与安全 Websocket 服务器的连接

    我的开发环境是这样的 操作系统 微软Windows 10 PHP 框架 Laravel 8 0 PHP 版本 7 4 Websocket 服务器 cboden ratchet 0 4 3 WAMP 服务器 3 2 0 Apache 2 4
  • 在 PostgreSQL 中存储图像

    好吧 我正在开发一个应用程序 该应用程序将使用运行 PostgreSQL 的 Linux 后端向 Windows 机器提供图像 前端用 C NET 编写 尽管前端应该不重要 我的问题是 在 Postgres 中存储图像的最佳方法是什么 每张
  • Apollo 服务器,Graphql - 必须提供查询字符串

    我不确定我在这里做错了什么 我现在已经被困了一段时间 让我的突变在无服务器设置中与我的 apollo server lambda 一起运行 当我尝试运行这样的查询时 我的查询工作正常 mutation signIn username Som

随机推荐

  • 在 AMP 中运行 JavaScript

    我对 JavaScript 应该如何在 AMP 页面中运行感到有点困惑 据我了解 我的 JavaScript 必须在 iframe 中执行 此类 iframe 必须放置在页面下方 至少从顶部起 75 并且必须通过 https 提供服务 这确
  • std::runtime_error::runtime_error(const std::string&) 如何满足 std::Exception 对 throw() 的要求?

    std exception要求它的构造函数是throw Yet std runtime error接受一个std string作为它的参数 这表明它正在存储一个std string某处 因此 作业或复制构造必须在某个地方进行 而对于std
  • http.sslVerify=false 不会在 git config 中禁用 ssl 验证

    Issue 我一直在尝试通过来自企业 GitHub 服务器的 http 代理 在 git 全局配置中设置 从 Ubuntu AWS 实例克隆 git 存储库 从代理克隆可以工作 但是从实例克隆 通过代理 我收到以下错误 致命 无法访问 ht
  • 在 Visual Studio 中调试 JavaScript 时出现“没有为当前文档加载符号”

    我正在开发一个 NET 3 5 网站 一个解决方案下有三个项目 我在这个项目中使用 jQuery 我想使用 Visual Studio JavaScript 调试器来单步执行我的 JavaScript 代码 如果我在任何 js 文件中设置断
  • QLabel Qt/c++ 文本的渐变颜色

    我尝试为 QLabel 文本设置渐变颜色 我正在尝试使用 setStyleSheet 函数 但它不起作用 我阅读这篇文章 https www qtcentre org threads 32781 don t work qlineargrad
  • data.table join + update with mult='first' 给出了意想不到的结果

    在下面的示例中 我有一个用户表和一个事务表 其中一个用户可以有 0 个 1 个或多个事务 我执行连接 更新mult first 在 users 表上尝试插入一列 指示每个用户第一次发生事务的日期 library data table v1
  • 如何从 XLL UDF 返回数组

    我正在尝试使用 C API 为 Excel 编写一个数组构造函数作为工作表函数 Goal array cons 1 2 3 gt 1 2 3 但是 我没有正确初始化 XLOPER12 在 Excel 中 我的函数当前返回 NUM 我正在将参
  • 模块已经成功安装,但是导入时却找不到? - Python

    我正在尝试使用 graphviz Python 模块 但遇到了这个问题 我在命令提示符下安装了它 但它没有显示在 IPython 中 我还有一个 Python 3 5 32 位 解释器 它显示在其中 但我正在尝试弄清楚如何安装它 以便它在
  • 如何找出 Instruments 中保留对象的内容?

    我最近将我的 iOS 项目转换为 ARC 视图控制器之一没有调用其 dealloc 方法 并且没有根据 Instruments 进行释放 我已经仔细检查了我的所有属性并将适当的属性设置为弱 我还确保任何将视图控制器作为委托的东西都在 vie
  • ZLIB 解压 - 客户端

    我正在以 ZLIB 压缩输入流 使用 Javascript Ajax JQuery 我需要在客户端解压缩它 有办法这样做吗 我已经在 J AVA 中工作了 如下所示 但需要在客户端执行此操作 url new URL getCodeBase
  • 如何在S3中保存数据流? aws-sdk-go 示例不起作用?

    我正在尝试将给定的数据流持久保存到 S3 兼容存储中 在流结束之前 大小是未知的 大小可能从 5MB 到 500GB 不等 我尝试了不同的可能性 但没有找到比自己实现分片更好的解决方案 我最好的猜测是使用我的流填充固定大小的缓冲区并将其写入
  • 神经网络反向传播算法在Python中不起作用

    我正在用 Python 编写一个神经网络 遵循示例here http page mi fu berlin de rojas neural chapter K7 pdf 考虑到神经网络在训练一万次后未能产生正确的值 在误差范围内 反向传播算法
  • 使用jquery创建动态数组

    我需要一些关于 jquery 数组的帮助 var queryArr markersArray each function index var locationId index var locName markersArray index n
  • 如果线程已经忙,newSingleThreadScheduledExecutor 的工作

    我的要求是创建一个服务 在特定的时间间隔后继续检查队列并处理队列中的元素 为了在 10 秒后安排任务 我使用 ScheduledExecutorService schd Executors newSingleThreadScheduledE
  • Oracle 将行数据作为指定数量的唯一条目的列返回

    我有一个 Oracle 表 它按项目编号标识符充当项目的活动日志 更改跟踪器 我想获取最后三个更改并以列格式列出它们 样本数据 Item No Shipping date Last updated 100 01 Sep 16 24 Aug
  • 从 java 获取 Linux 发行版

    从java中 我得到了我正在工作的操作系统的名称 请参阅下面的代码 System out println System getProperty os name 在 windows xp 中 它打印如下 Windows XP 但在 ubunt
  • 在 Hbase shell 上运行多个查询,无需再次调用 hbase shell

    再次调用 shell 需要时间 我想通过调用 hbase shell 一次来执行多个命令 下面的代码仅运行单个查询 cmd echo put test row1 cf a value1 hbase shell 我想在单个 hbase she
  • 数组[1]会发生什么

    我有一大段代码 旨在获取一个数组并对其进行处理 在当前项目中只有一个元素 因此我没有将变量更改为 char 而是将其声明为 char 数组 1 这样 我不需要修改我的代码 也不需要冒添加任何错误的风险 并且如果需求增长 可以轻松地增加它 它
  • 在 C++11 之前,移动语义是如何解决的?

    我最近一直在阅读移动语义以及它是如何引入到 C 11 中的 主要要点是 通过 窃取 临时对象的指针来创建对象 程序可以变得更加高效 这比对临时对象进行深度复制来创建新对象要高效得多 在 C 11 及更高版本 中 这是通过使用右值引用来实现的
  • javascript从X,Y到X1,Y1的平滑动画

    我想慢慢地将图像 或元素 从其实际的 X Y 位置移动到 X1 Y1 当 的时候distanceX 和 X1 之间is equalY 和 Y1 之间的那个很容易 但是 如果 X 差异为 100 像素 Y 差异为 273 像素怎么办 作为 J