0

我有两个可视化，每个在不同的 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;    
}
4

2 回答 2

0

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

如果您的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";
于 2013-04-23T22:15:39.863 回答
0

这是一个非常简单的工作示例，在单击按钮时将三个 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

于 2017-10-29T08:29:56.620 回答