javascript - 如何使用DOJO将文本翻译为相对位置？-6ren

javascript - 如何使用DOJO将文本翻译为相对位置？

转载作者：行者123 更新时间：2023-12-03 05:11:21

25

4

假设我们有一个 h1 文本，我们想使用 DOJO 将其移动到新位置，并带有翻译动画。我们希望新的 h1 具有相同的 y 坐标(距顶部的高度)，但向右移动 200 像素。

fx.slideTo 应该完成这项工作:

var greetingNode = dom.byId("greeting");
var obj = domGeom.position(greetingNode, true);
fx.slideTo({
    node: greeting,
    top: obj.y, //pseudocode; obj[1]? obj.Y?
    left: obj.x + X //pseudocode; obj[0]? obj.X?
}).play();

我无法正确访问 obj。另外，如果我打印文本坐标，它们似乎是 x:8 和 y:21.43 周期性的。您能告诉我一下吗？

ps:html.coords 可以完美工作，但它已被弃用，并且 DOJO 文档建议使用 dojo.position 代替。

完整代码在这里:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>

<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>            

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greeting.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/

        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);

        fx.slideTo({
            node: greeting,
            top: ? //works with coords.y
            left: ? //works with coords.x + 200
        }).play();
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div>
</body>
</html>

最佳答案

我认为您所做的事情没有任何问题。您得到的结果 x: 8 和 y:21.43 是浏览器设置的默认 margin。尝试将其重置为 0px 并清除您的问题。

HTML default body margin

此外，如果您不想更改高度，则不要更新 fx.slideTo 中的 top 值。

以下是更新后的示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
  <style>
    body, h1{
      margin:0px
    }
  </style>
<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

<!-- load Dojo 
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>       -->     

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greetingNode.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/
        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);
      
        fx.slideTo({
            node: greetingNode,
            //top: obj.y, //works with coords.y
            left: obj.x + 200 //works with coords.x + 200
        }).play();
      
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div> 
</body>
</html>

关于javascript - 如何使用DOJO将文本翻译为相对位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41804627/

25

4

0

文章推荐： javascript - php javascript 刷新页面

文章推荐： javascript - 创建闭包的条件是什么？

文章推荐： javascript - 具有自定义输入的 Angular 2 模板驱动表单

文章推荐： javascript - 从 Playframework 中的 Json Url 下载 .json 文件

沿框架旋转点的算法(相对)
我们有一个应用程序，我们可以在其中设计标签，然后根据设计创建图像并将其发送到打印机。图像在通过 TCP/IP 发送之前被制成字节流。简而言之，我们有一个旋转设置，可以自动计算标签上不同元素的位置。而
Javascript 相对 URL
我们在 IIS7 中有一个 MVC3 应用程序:http://mydomain.com/myapplication/ javascript 中的相对 URL 是什么: http://mydomain.
javascript - 相对+绝对定位
我的例子:http://jsfiddle.net/kwnk8qup/ 我的代码: container(父 div
绝对定位后的 CSS 相对
如何将元素放置在右侧，并保持后面元素的持久位置？我想在没有 Efficiently ... 的情况下将 text-align: right 对齐到右侧，并保留 t2 和 t3 元素之间的空间。当我
Python 相对 __import__
假设我有一个包含以下文件的模块包。一个空文件 C:\codes\package\__init__.py 和一些重要文件: 一个位于C:\codes\package\first.py def f():
C++ MOUSEEVENTF_MOVE 相对
我正在尝试使用以下代码在屏幕上相对移动光标: input.type = INPUT_MOUSE; ZeroMemory(&input, sizeof(input)); input.mi.mouseDa
CSS 相对 + float
我排列了 3 个 div；中心 div 有许多 position:absolute 图像(它们重叠——一次显示一个图像；其余的是 display:none;对于 jQuery 交叉淡入淡出，这不是密切
sql - 选择具有最高(相对)时间戳的所有行
我在 SQL 2000 数据库中有以下简化的表结构: ID AppName Key Value EffectiveDate -- ------- ----- ------- ---
Nginx 相对 URL 到绝对重写规则？
给定以下配置: server { listen 80; server_name site.com; location /proxy { proxy_pa
wpf - 相对 URI 路径无法正常工作
我正在使用这些方法动态加载图像和资源目录，但它们并不适用于所有情况 new Uri(@"pack://application:,,/Images/lession_tab.png"); 此方法不适用于图
sqlite - SQLite更新ONE记录非常(相对)缓慢
在插入/更新许多行时，我知道SQLite的“问题”，但事实并非如此。我正在更新包含约250条记录的表中的ONE一行（由PK索引）中的ONE字段。查询通常需要200毫秒左右的时间。听起来很少，但很大。
java - 如何在android中滑动布局(线性/相对..)
如何向左或向右滑动线性布局。在该线性布局中，默认情况下我有一个不可见的删除按钮，还有一些其他小部件，它们都是可见状态，当向左滑动线性布局时，我需要使其可见的删除按钮，当向右滑动时，我需要隐藏该删除按钮
OpenGL - GlVertex 相对/绝对位置
Imagen 我有一个 2D 点 (x,y) 列表，它们在我的简单游戏中描述了 2D 地形。然后我让 glVertex() 在 GL_POINTS 模式下绘制所有这些点。然后我有一个球，它也有它的
php - 选择(相对)较大的数据库表
我正在使用 Google CloudSQL 并具有以下简单代码: ;dbname=', 'root', '' ); $db->setAttribute ( PDO::ATTR_ERRMODE, PDO
java - 路径、相对、直接
我知道有几个类似的问题，但是，其中的示例并没有说明问题，或者我无法从中获利 - 我真可耻。所以我的问题是在带有 GUI 的简单应用程序中加载图像。例如: 我在 "D:\javaeclipseprog
html - 相对 div 与父表格单元格重叠
我对放置在表格单元格内的 div 有疑问。单元格具有固定的高度和 div 相对于 height:100% 定位。 jsfiddle example td { height:80px;
python - 相对 XPath 错误地选择了循环中的相同元素
我正在抓取一些数据。我需要的数据点之一是日期，但包含此数据的表格单元格仅包括月份和日期。幸运的是，年份被用作对表格进行分类的标题元素。出于某种原因，year = table.find_elemen
html - 相对 DIV 宽度和高度
我想要一个 DIV，最大 90% 高度或 90% 宽度。我只想将图片作为背景放入 DIV 中，并且完整的 svg-image 应该是可见的。在移动设备和桌面设备上。 CSS: .camera {
html - CSS 相对-绝对位置
我是网页设计新手，想了解 CSS 中定位的概念。我对相对和绝对定位元素有一些了解。在下面的 fiddle 中，我有一个作为的父级.当我做 p position:absolute ，边框崩溃不像我
html - 动态调整图像大小，相对/绝对定位？
我在调整图像高度相对于浏览器窗口的大小时遇到了一些严重的困难——宽度可以很好地调整大小，但高度保持不变。我尝试过 height: 100% 和 height: auto，以及 height: 10

首页

博学

6Ren·AI

商城

javascript - 如何使用DOJO将文本翻译为相对位置？