大佬教程收集整理的这篇文章主要介绍了单击时从一个元素到多个元素绘制一条线，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试从元素 [.IDentifIEr] 到单击的元素 [ A,B,C serIEs ] 画一条线。我能够显示这条线，但在另一个方向上，不知道为什么它在这样一个方向上显示。 这是我的小提琴：https://jsfiddle.net/SampathPerOxide/u2afymxs/11/ 有人可以帮我在“.IDentifIEr”和相应的系列元素之间显示一条线吗？
点击 A 系列的预期结果：
$('.serIEsli').click(function() {
function adjustline(from,to,linE) {
var fT = from.offsettop + from.offsetHeight / 2;
var tT = to.offsettop + to.offsetHeight / 2;
var fL = from.offsetleft + from.offsetWIDth / 2;
var tL = to.offsetleft + to.offsetWIDth / 2;
var CA = Math.abs(tT - fT);
var CO = Math.abs(tL - fL);
var H = Math.sqrt(CA * CA + CO * CO);
var ANG = 180 / Math.PI * Math.acos(CA / H);
if (tT > fT) {
var top = (tT - fT) / 2 + fT;
} else {
var top = (fT - tT) / 2 + tT;
}
if (tL > fL) {
var left = (tL - fL) / 2 + fL;
} else {
var left = (fL - tL) / 2 + tL;
}
if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) {
ANG *= -1;
}
top -= H / 2;
line.style["-webkit-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-moz-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-ms-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-o-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-transform"] = 'rotate(' + ANG + 'deg)';
line.style.top = top + 'px';
line.style.left = left + 'px';
line.style.height = H + 'px';
}
adjustline(
document.getElementByID('div1'),document.getElementByID('div2'),document.getElementByID('line')
);
});.IDentifIEr {
wIDth: 10px;
height: 10px;
BACkground-color: red;
position: absolute;
right: 45%;
top: 50%;
}
.serIEs-div {
position: absolute;
right: 5%;
bottom: 30%;
}
.serIEs-ul li {
List-style: none;
color: grey;
@R_403_6837@-size: 1em;
@R_403_6837@-weight: 600;
border: 2px solID grey;
display: table;
padding: 0.3em 0.1em;
text-align: center;
margin: 0.5em;
cursor: pointer;
}
#line {
position: absolute;
wIDth: 2px;
margin-top: -1px;
BACkground-color: red;
}<script src="https://cdnjs.cloudFlare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script>
<div style="position;relative;">
<div class="IDentifIEr" ID="div2"></div>
<div class="serIEs-div">
<ul class="serIEs-ul">
<li class="serIEsli" ID="div1">A serIEs</li>
<li class="serIEsli">B serIEs</li>
<li class="serIEsli">C serIEs</li>
</ul>
</div>
<div ID="line"></div>
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLs.jpg" class="img-responsive firstcar-detail" style="wIDth: 100%;">
</div>
我修好了你的小提琴：https://jsfiddle.net/c4ju6a0p/
代码更改：
// Get actual position relative to viewport.
// See https://stackoverflow.com/a/11396681/117030
fromBCR = from.getBoundingClientRect();
toBCR = to.getBoundingClientRect();
var fT = fromBCR.top + from.offsetHeight / 2;
var tT = toBCR.top + to.offsetHeight / 2;
// Don't add offsetWidth. This connects to the middle,not the left edge.
var fL = fromBCR.left //+ from.offsetWidth / 2;
var tL = toBCR.left + to.offsetWidth / 2;
relative 定位，计算线的位置不正确。注释掉 relative CSS 后可以更清楚地看到这一点：https://jsfiddle.net/vust5nxf/
offsetWidth。更新： 没有注意到代码片段...也在那里应用了更改。我还做了一项更改：
adjustLine()，否则当前每次都会在相同的两个元素之间绘制一条线，因为这些元素是用 id 硬编码的。adjustLine() 的定义移到点击处理程序之外。这将使代码更易于阅读，并且该函数只会创建一次，而不是每次处理一次点击。adjustLine(
this,// Element that was clicked.
document.getElementById('div2'),document.getElementById('line')
);
$('.seriesli').click(function() {
function adjustLine(from,to,linE) {
// Get actual position relative to viewport.
// See https://stackoverflow.com/a/11396681/117030
fromBCR = from.getBoundingClientRect();
toBCR = to.getBoundingClientRect();
var fT = fromBCR.top + from.offsetHeight / 2;
var tT = toBCR.top + to.offsetHeight / 2;
// Don't add offsetWidth. This connects to the middle,not the left edge.
var fL = fromBCR.left //+ from.offsetWidth / 2;
var tL = toBCR.left + to.offsetWidth / 2;
var CA = Math.abs(tT - fT);
var CO = Math.abs(tL - fL);
var H = Math.sqrt(CA * CA + CO * CO);
var ANG = 180 / Math.PI * Math.acos(CA / H);
if (tT > fT) {
var top = (tT - fT) / 2 + fT;
} else {
var top = (fT - tT) / 2 + tT;
}
if (tL > fL) {
var left = (tL - fL) / 2 + fL;
} else {
var left = (fL - tL) / 2 + tL;
}
if ((fT < tT && fL < tL) || (tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)) {
ANG *= -1;
}
top -= H / 2;
line.style["-webkit-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-moz-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-ms-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-o-transform"] = 'rotate(' + ANG + 'deg)';
line.style["-transform"] = 'rotate(' + ANG + 'deg)';
line.style.top = top + 'px';
line.style.left = left + 'px';
line.style.height = H + 'px';
}
adjustLine(
this,// Element that was clicked.
document.getElementById('div2'),document.getElementById('line')
);
});.identifier {
width: 10px;
height: 10px;
BACkground-color: red;
position: absolute;
right: 45%;
top: 50%;
}
.series-div {
position: absolute;
right: 5%;
bottom: 30%;
}
.series-ul li {
list-style: none;
color: grey;
font-size: 1em;
font-weight: 600;
border: 2px solid grey;
display: table;
padding: 0.3em 0.1em;
text-align: center;
margin: 0.5em;
cursor: pointer;
}
#line {
position: absolute;
width: 2px;
margin-top: -1px;
BACkground-color: red;
}<script src="https://cdnjs.cloudFlare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position;relative;">
<div class="identifier" id="div2"></div>
<div class="series-div">
<ul class="series-ul">
<li class="seriesli" id="div1">A series</li>
<li class="seriesli">B series</li>
<li class="seriesli">C series</li>
</ul>
</div>
<div id="line"></div>
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLs.jpg" class="img-responsive firstcar-detail" style="width: 100%;">
</div>以上是大佬教程为你收集整理的单击时从一个元素到多个元素绘制一条线全部内容，希望文章能够帮你解决单击时从一个元素到多个元素绘制一条线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。