如何重叠包含形状的元素

Posted 2023-05-08

技术标签:

【中文标题】如何重叠包含形状的元素【英文标题】：How do I overlap elements containing shapes 【发布时间】：2021-04-02 11:42:07 【问题描述】：

我想要的是让每边的两个正方形走到一起并成为一个，即一个在包装纸的中心重叠。我遇到的问题是，一旦它们聚集在一起，其中一个方块就会下降一个级别。我不确定这是使用 jQuery 还是使用 CSS 实现的。

请看我的program here

$(document).ready(() => 
  $(".square").animate(
    backgroundColor: "red",
  , 3000);

  $("#squareOne").animate(
    marginLeft: "+=45%",
  , 800);

  $("#squareTwo").animate(
    marginRight: "+=45%",
  , 800);
);

#wrapper 
  width: ...;
  margin: 100px auto;
  border: 1px solid black;


.square 
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10% 30px;


#squareTwo 
  position: relative;
  float: right;


#squareOne 
  position: relative;
  background: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="wrapper">
    <div class="square" id="squareOne"></div>
    <div class="square" id="squareTwo"></div>
  </div>
</body>

【问题讨论】：

【参考方案1】：

如果你想让方块重叠，它们必须绝对定位。

然后，有一个关于要行驶的距离的计算……

$(document).ready(() => 
  $(".square").animate(backgroundColor: "red",3000);
  
  // Calculate the slide distance
  // That is half the wrapper width minus the half of the square width
  let distanceToTravel = $("#wrapper").width() / 2 - $(".square").outerWidth() / 2;

  $("#squareOne").animate(marginLeft: distanceToTravel,800);
  $("#squareTwo").animate(marginRight: distanceToTravel,800);
);

#wrapper 
  margin: 100px auto;
  border: 1px solid black;
  position: relative;
  display: flex;
  justify-content: space-between;
  

.square 
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10% 30px;
  position: absolute;


#squareTwo 
  right: 0;

<head>
  <meta charset="utf-8">
  <title>javascript</title>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="scripts/fma_t5.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="wrapper">
    <div class="square" id="squareOne"></div>
    <div class="square" id="squareTwo"></div>
  </div>
</body>

【讨论】：

你知道我怎样才能让两个正方形顺时针旋转 10 秒，一旦它们合在一起？看here。【参考方案2】：

问题是你使用马林。但边距确实会推动其他对象。使用 position: relative; 和 left: 800px; 代替边距，另一个 right: 800px; 现在不应该跳来跳去。

【讨论】：

以上是关于如何重叠包含形状的元素的主要内容，如果未能解决你的问题，请参考以下文章

如何触发包含三个重叠 div 元素的 :hover 过渡（维恩图）