首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS绘制一个从一个div指向另一个div的箭头

要实现从一个div指向另一个div的箭头,可以使用JavaScript和CSS来完成。以下是一种实现方式:

  1. 首先,在HTML中创建两个div元素,分别为sourceDiv和targetDiv,用于表示箭头的起点和终点。
代码语言:txt
复制
<div id="sourceDiv"></div>
<div id="targetDiv"></div>
  1. 在CSS中定义箭头的样式,可以使用伪元素::before或::after来创建箭头形状,并设置其样式属性。
代码语言:txt
复制
.arrow {
  position: relative;
  width: 0;
  height: 0;
}

.arrow::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent transparent #000;
  transform: rotate(45deg);
}
  1. 在JavaScript中获取sourceDiv和targetDiv的位置信息,并计算箭头的起点和终点坐标。
代码语言:txt
复制
var sourceDiv = document.getElementById("sourceDiv");
var targetDiv = document.getElementById("targetDiv");

var sourceRect = sourceDiv.getBoundingClientRect();
var targetRect = targetDiv.getBoundingClientRect();

var sourceX = sourceRect.left + sourceRect.width / 2;
var sourceY = sourceRect.top + sourceRect.height / 2;

var targetX = targetRect.left + targetRect.width / 2;
var targetY = targetRect.top + targetRect.height / 2;
  1. 创建一个箭头元素,并设置其位置和样式。
代码语言:txt
复制
var arrow = document.createElement("div");
arrow.className = "arrow";
arrow.style.left = sourceX + "px";
arrow.style.top = sourceY + "px";
arrow.style.width = Math.sqrt(Math.pow(targetX - sourceX, 2) + Math.pow(targetY - sourceY, 2)) + "px";
document.body.appendChild(arrow);

通过以上步骤,就可以实现从一个div指向另一个div的箭头效果。可以根据实际需求调整箭头的样式和位置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分22秒

寒冷冬日,送Ta一杯咖啡☕,暖暖Ta的心❤

领券