Fatal编程技术网
  • javascript/
  • Javascript 如何使用DOJO将文本翻译到相对位置？

Javascript 如何使用DOJO将文本翻译到相对位置？

javascript dojo

Javascript 如何使用DOJO将文本翻译到相对位置？,javascript,dojo,Javascript,Dojo,假设我们有一个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; ob

假设我们有一个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是浏览器设置的默认边距。尝试将其重置为0px，以清除问题

此外，如果不希望更改高度，则不要更新fx.slideTo中的顶部值

以下是更新后的示例：

教程：你好，Dojo！ 身体，h1{ 保证金：0px } dojoConfig={ 有：{ dojo firebug：没错， dojo调试消息：true }, 异步：true }; -> 要求[ dojo/dom几何体， dojo/dom， dojo/dom风格， dojo/fx， dojo/dom构造， dojo/json， /*'dojo/_base/html'，*///不推荐使用的html.coords需要 dojo/domReady！ ]，函数domgome，dom，style，fx，domConstruct，JSON{ var greetingNode=dom.byIdgreeting； domConstruct.placedojo！，greetingNode； greetingNode.innerHTML+=来自Dojo！； /*coords模块已弃用！请改用position var coords=html.coordsgreetingNode*/ var obj=domGeom.positiongreetingNode，true； dom.byIddivcoordinates.innerHTML=JSON.stringifyobj； fx.slideTo{ 节点：欢迎节点， //top:obj.y，//与coords.y一起工作 左：obj.x+200//与coords.x+200配合使用 }.玩； }; 你好 分区坐标：
事实上，它在body和h1边距为零的情况下工作。但是如果我想翻译一个没有边距的元素：0呢？如果没有边距0，请尝试添加alertJSON.stringifyobj；在var obj声明之后。您将注意到h1文本最初位于一个位置，然后在开始转换效果之前跳到另一个位置。为什么呢？假设我要翻译一个元素，它的上边距为50px，我不能将它设置为零。谢谢您的帮助。正如我提到的，如果您不设置任何边距，它将具有由浏览器定义的默认边距。如果你能控制这一切，那就太好了。其次，位置将从相对位置更改为绝对位置，这将导致其跳跃。因此，请确保您在之前将其设置为绝对值，并将其放置在您想要的位置。在我看来，slideTo方法应命名为slideBy，因为从技术上讲，slide建议我们必须指定一个坐标为x，y的新点，这就是我设置为top:obj.y的原因。但是，这样做也会垂直平移项目。不管怎样，正如您所说，设置margin:0是可行的，但是我发现只给出position:relative-h1也可以，而不会影响其他HTMLDOM元素的位置。谢谢