javascript 我怎样才能创建一个圆形的弧形图标周围浮动的行动按钮与可点击的工具提示

46qrfjad 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(114)

我正在做一个网络项目，我有一个浮动的操作按钮，位于屏幕的右下角或左下角。当我单击此按钮时，按钮上方垂直显示四个图标。
当前，图标以垂直布局显示在浮动操作按钮上方。但是，我希望图标围绕按钮以圆弧形式排列，并保持其垂直顺序。此外，我想实现可点击的工具提示，为每个图标，显示一些信息时，用户悬停在他们。
代码Sanbox Link https://codepen.io/Markshall/pen/wQyWqq
下面是我的要求的图像。

body {
  background-color: #f5f5f5;
}

.adminActions {
  position: fixed;
  bottom: 35px;
  right: 35px;
}

.adminButton {
  height: 60px;
  width: 60px;
  background-color: rgba(67, 83, 143, .8);
  border-radius: 50%;
  display: block;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}

.adminButton i {
  font-size: 22px;
}

.adminButtons {
  position: absolute;
  width: 100%;
  bottom: 120%;
  text-align: center;
}

.adminButtons a {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-decoration: none;
  margin: 10px auto 0;
  line-height: 1.15;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  position: relative;
  box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
}

.adminButtons a:hover {
  transform: scale(1.05);
}

.adminButtons a:nth-child(1) {
  background-color: #ff5722;
  transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;
}

.adminButtons a:nth-child(2) {
  background-color: #03a9f4;
  transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;
}

.adminButtons a:nth-child(3) {
  background-color: #f44336;
  transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;
}

.adminButtons a:nth-child(4) {
  background-color: #4CAF50;
  transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;
}

.adminActions a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.adminToggle {
  -webkit-appearance: none;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 2;
  transition: box-shadow .2s ease-in-out;
  box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}

.adminToggle:hover {
  box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}

.adminToggle:checked~.adminButtons a {
  opacity: 1;
  visibility: visible;
}

<div class="adminActions">
  <input type="checkbox" name="adminToggle" class="adminToggle" />
  <a class="adminButton" href="#!"><i class="fa fa-cog"></i></a>
  <div class="adminButtons">
    <a href="#" title="Add Company"><i class="fa fa-building"></i></a>
    <a href="#" title="Edit Company"><i class="fa fa-pen"></i></a>
    <a href="#" title="Add User"><i class="fa fa-user-plus"></i></a>
    <a href="#" title="Edit User"><i class="fa fa-user-edit"></i></a>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/76293417/how-can-i-create-a-circular-arc-of-icons-around-a-floating-action-button-with-cl

1条答案

按热度按时间

3mpgtkmj1#

看看这个示例代码，它解决了排序像一个圆圈的问题（你可以做工具提示部分，这很容易，它将采取更多的工作比我花回答）
像时钟一样从右向左思考，这样元素就会按这个顺序出现

const conatiner = document.querySelector(".btn-container");
const btn = conatiner.querySelector(".btn");
let hideTimeout = null;

const distance = 64; // distance circles from center
const from = 0.5; // half angle // start angle
const to = 0.75; // 75% of full angle // end angle

conatiner.addEventListener("mouseover", () => {
  clearTimeout(hideTimeout);
  const btnSecondarys = conatiner.querySelectorAll(".btn-secondary");
  const steps = (to - from) / (btnSecondarys.length - 1);
  
  btnSecondarys.forEach((element, x) => {
    const percentAngle = from + (steps * x);    
    const angle = (Math.PI * 2) * percentAngle;

    element.style.top = (Math.sin(angle) * distance) + 'px';
    element.style.left = (Math.cos(angle) * distance) + 'px';
    element.style.opacity = 1;
  });
});

conatiner.addEventListener("mouseout", () => {
  hideTimeout = setTimeout(() => {
    conatiner.querySelectorAll(".btn-secondary").forEach(element => {
      element.style.top = 0;
      element.style.left = 0;
      element.style.opacity = 0;
    });
  }, 1000);
});

.btn-container {
  position: relative;
  top: 100px;
  left: 100px;
}

.btn {
  background-color: white;
  border: 1px solid gray;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  cursor: pointer;
  z-index: 99;
  position: relative;
  cursor: pointer;
}

.btn.btn-secondary {
  position: absolute;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  opacity: 0;
  transition: all .5s linear;
  transform: translateX(0.25rem) translateY(0.25rem);
  top: 0;
  left: 0;
}

<div class="btn-container">
  <button class="btn">A</button>
  <button class="btn btn-secondary">B</button>
  <button class="btn btn-secondary">C</button>
  <button class="btn btn-secondary">D</button>
  <button class="btn btn-secondary">E</button>
  <button class="btn btn-secondary">F</button>
</div>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 我怎样才能创建一个圆形的弧形图标周围浮动的行动按钮与可点击的工具提示

1条答案

相关问题

热门标签

最新问答