用箭头连接两个 div (1)

📌 相关文章

📜 用箭头连接两个 div (1)

📅 最后修改于: 2023-12-03 15:11:19.349000 🧑 作者: Mango

用箭头连接两个 div

在前端开发中，我们经常需要将两个或多个不同的元素进行连接和组合。其中，用箭头连接两个 div 是一种常见的方式，可以用来表示他们之间的关联关系。下面就是如何实现这一效果的示例代码。

HTML

首先，我们需要在 HTML 文件中定义两个 div 元素，并分别赋予它们不同的 id。

<div id="div1"></div>
<div id="div2"></div>

CSS

然后，我们需要在 CSS 文件中定义样式，使这两个 div 元素沿着箭头的方向进行连接。

#div1 {
  width: 100px;
  height: 100px;
  background-color: #3399cc;
  position: absolute;
  left: 50px;
  top: 50px;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #ff6666;
  position: absolute;
  left: 250px;
  top: 50px;
}

.arrow {
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #000000;
}

在这段代码中，我们定义了两个 div 的样式，并且增加了一个名为 arrow 的 class，用来表示箭头的样式。这个 class 的样式中，我们主要是使用了边框的样式及颜色，来进行箭头的绘制。

JS

最后，我们需要在 JavaScript 文件中实现箭头的绘制和连接。这可以通过以下代码实现：

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var arrow = document.createElement('div');

arrow.className = 'arrow';

var x1 = div1.offsetLeft + div1.offsetWidth;
var y1 = div1.offsetTop + div1.offsetHeight / 2;
var x2 = div2.offsetLeft;
var y2 = div2.offsetTop + div2.offsetHeight / 2;

var angle = Math.atan2(y2 - y1, x2 - x1);

var length = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));

arrow.style.width = length + 'px';
arrow.style.transform = 'rotate(' + angle + 'rad)';
arrow.style.left = x1 + 'px';
arrow.style.top = y1 + 'px';

document.body.appendChild(arrow);

在这段代码中，我们首先通过 getElementById 方法获取到两个 div 元素，然后创建一个名为 arrow 的新 div 元素，用来绘制箭头。接着，我们计算出了两个 div 元素之间的连线角度和距离，并通过改变 arrow 的 width、transform、left 和 top 样式来进行绘制和定位。最后，我们将 arrow 元素添加到了页面中，完成了两个 div 元素的连接。

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用箭头连接两个 div</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: #3399cc;
      position: absolute;
      left: 50px;
      top: 50px;
    }

    #div2 {
      width: 100px;
      height: 100px;
      background-color: #ff6666;
      position: absolute;
      left: 250px;
      top: 50px;
    }

    .arrow {
      position: absolute;
      border-style: solid;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent #000000;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>

  <script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var arrow = document.createElement('div');

    arrow.className = 'arrow';

    var x1 = div1.offsetLeft + div1.offsetWidth;
    var y1 = div1.offsetTop + div1.offsetHeight / 2;
    var x2 = div2.offsetLeft;
    var y2 = div2.offsetTop + div2.offsetHeight / 2;

    var angle = Math.atan2(y2 - y1, x2 - x1);

    var length = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));

    arrow.style.width = length + 'px';
    arrow.style.transform = 'rotate(' + angle + 'rad)';
    arrow.style.left = x1 + 'px';
    arrow.style.top = y1 + 'px';

    document.body.appendChild(arrow);
  </script>
</body>
</html>