如何將文字翻譯成與DOJO的相對位置？

假設我們有一個h1文本，並且我們要將它與DOJO移動到新位置，翻譯動畫。我們希望新的h1擁有相同的y座標（頂部的高度），但將200像素向右移動。如何將文字翻譯成與DOJO的相對位置？

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>  <script> dojoConfig= { has: { "dojo-firebug": true, "dojo-debug-messages": true }, async: true }; </script>  <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>

來源

2017-01-23 bransharp

我看不出有什麼問題，你在做什麼。得到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>

來源

2017-01-23 15:52:52

事實上，它的身體和H1利潤率工作在零。但是如果我想翻譯一個沒有邊距的元素：0？如果沒有保證金0，請嘗試添加「警報（JSON.stringify（obj））;」立即在「var obj」聲明之後。您會注意到，h1文本最初位於一個位置，然後在開始翻譯效果之前將其跳到另一個位置。這是爲什麼？比方說，我想翻譯一個頂部邊距爲50px的元素，我不能將其設置爲零。感謝您的幫助。 – bransharp

正如我所提到的，如果您沒有設置任何保證金，它會有瀏覽器定義的默認保證金。如果你掌握了這一點，那會很好。其次，「位置」將從「相對」改變爲「絕對」，這將導致它跳躍。所以確保你以前將它設置爲「絕對」，並且將它放在你想要的位置。 –

在我看來，slideTo方法應該命名爲* slideBy *，因爲從技術上講，「幻燈片」表明我們必須指定一個新座標爲x，y的點，這就是爲什麼我設置top：obj.y.但是，這樣做也會垂直翻譯該項目。無論如何，正如你所說的那樣，**設置** margin：0 **工程**，但我發現只給''相對位置：'相對於'h1'也能完成這項工作，而不會干擾位置其他HTML DOM元素**。謝謝！ – bransharp

如何將文字翻譯成與DOJO的相對位置？

回答

相關問題