0

首先，我有这个： 在此处输入图像描述

现在，我想做的是对一些节点进行“缩放”。双击某些节点后，我想在页面上查看整个节点： 在此处输入图像描述

现在，因为每次我缩放一个节点 - 我看到同样的东西（一个大圆圈），我想做这个：一旦我双击一个节点 - 只添加一个新的 div 它将有圆圈和它将重叠其容器。我正在和Raphael一起工作，所以应该用 Raphael 绘制圆圈。

我应该如何用 JavaScript 做到这一点？（用与容器重叠的圆圈添加新的 div，并用 Raphael 绘制圆圈，这应该不难，但 div 的创建是我卡住的部分）

到目前为止我所做的是：

zoomDiv = document.createElement('div');
zoomDiv.id = 'graph-zoom';
zoomDiv.style.position = 'absolute';
zoomDiv.style.zIndex = 2000;
this.container.appendChild(zoomDiv);

当我转到 HTML 时，我可以看到 div 已添加到容器中： 在此处输入图像描述

但它太低了。我不知道这是否是我目前看不到空 div 的问题，还是其他原因？

4

2 回答 2

2

这个例子演示了在 javascript 中的创建div，如何在 中添加和删除它document.body，使用 CSS和 CSS将元素放在另一个之上。position: absolute;z-index

CSS

#parent {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 300px;
    z-index: 0;
    background-color: yellow;
}
#child {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 300px;
    z-index: 1;
    background-color: green;
}

HTML

<div id="parent">
    <button id="open">Open</button>
</div>

Javascript

var parent = document.getElementById("parent");
var open = document.getElementById("open");

function addChild() {
    var div = document.createElement("div");
    var close = document.createElement("button");

    div.id = "child";

    close.id = "close";
    close.textContent = "Close";
    close.addEventListener("click", function closeSelf() {
        document.body.removeChild(div);
    }, false);

    div.appendChild(close);
    document.body.appendChild(div);
}

open.addEventListener("click", addChild, false);

在jsfiddle 上

于 2013-05-06T10:01:34.270 回答
1

创建很简单：
var new_div = document.createElement("div");

插入有点困难：

var your_raphael_container_parent = your_raphael_container.parentNode;
    if (your_raphael_container.nextSibling) {
      your_raphael_container_parent.insertBefore(new_div, your_raphael_container.nextSibling);
    }
    else {
      your_raphael_container_parent.appendChild(new_div);
    }
于 2013-05-06T09:54:06.773 回答