Question

我有两个可视化，每个都在不同的div中。我想在按钮点击上放置一个div而不是叠加并比较它们。然后，在另一个按钮单击，我想将其分开。任何代码段或链接将不胜感激。现在我只想尝试使用以下javascript函数：

function ShowOverlay(divID, xCoordinate, yCoordinate) {    
    var divObject = document.getElementById(divID);    
    divObject.style.visibility = "visible";    
    divObject.style.left = xCoordinate;    
    divObject.style.top = yCoordinate;    
}

Answer 1

你应该使用绝对或相对定位。

如果您的position媒体资源未设置为absolute或relative style.left，则style.top将无效。

以下将允许它们移动（您只需要计算坐标：

function ShowOverlay(divID, xCoordinate, yCoordinate) {

    var divObject = document.getElementById(divID);

    divObject.style.visibility = "visible";
    divObject.style.left = xCoordinate;
    divObject.style.top = yCoordinate;
    divObject.style.position = "absolute";

}

要撤消它，将简单的设置位置恢复为静态：

divObject.style.position = "static";

Answer 2

这是一个非常简单的工作示例，即在按钮单击时将三个div相互移动。 HTML代码

<div class="container">
 <div class = "circlea"><h2>link</h2></div>
 <div class = "circleb"><h2>link</h2></div>
 <div class = "circlec"><h2>link</h2></div>
 <button >click me</button>
</div>


.circlea,.circleb,.circlec{
 height:150px;
 width:150px;
 border-radius:50%;
 margin-left:50%;
 margin-top:120px;
 position: absolute;
 transition: all 1s ease-in-out;
 opacity:0;
 color:white;
 text-align:center; 
}

.circlea{
 background-color:rgba( 20, 155, 138 );
 }

.circleb{
 background-color:rgba( 155, 20, 144 );
}

.circlec{
 background-color:rgba( 24, 155, 20);
 opacity:1;
}

button{
 background-color:tomato;
 width:100px;
 padding:10px;
 color:white;
 }

.transforma{
 margin-left:200px;
 opacity:1;
 }

.transformb{
  margin-left:800px;
  opacity:1;
 }

.transformb{
 opacity:1;
 }

js

 $("button").click(function(){

  $("div.circleb").toggleClass("transformb");
  $("div.circlea").toggleClass("transforma");

 });

https://codepen.io/pranjalkoshti/pen/rYNQeL

点击一个按钮，将一个div叠加在另一个div上

2 个答案: