您好我试图让两个箭头指向特定的(x,y)点或按钮的一般区域。
我希望每个指向按钮一般区域的方框中都有两个箭头。我可以在某些屏幕上使用常规css做到这一点,但是当屏幕调整大小或更小时,箭头不再指向按钮。我只想弄清楚处理这个问题的好方法。
所以我真正要问的是,在2个div指向同一个点之后附加两个箭头会有什么好方法。 (红场)
的jsfiddle: https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
答案 0 :(得分:1)
我不是一个真正的数学爱好者,我设法在互联网上找到一个公式来做你想做的事。
来源Pen我没有跟随鼠标,而是按照按钮进行操作 PS:为了解释这个问题,我删除了右边的html。
我知道这不是一个完整的答案,但您可以从这里进行调整。
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
&#13;
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
&#13;
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
&#13;