javascript - 如何在 anchor 标签点击显示的现有圆上制作同心圆

Question

我有一个小圆圈，上面是一个“+”按钮。单击时，会出现一个圆圈(虚线圆圈)，我的数据库中的数据会沿其圆周显示。

现在我想要另一个同心圆，它也应该与第一个圆一起显示在按钮点击时。

function toggleDiv(divId){
    $("#"+divId).toggle();
}

      .post-share{
          display: block;
          width: 74px;
          height: 34px;
          margin: 40px 0px 0px 0px;
          background: #3e599a;
          text-decoration: none;
          width: 110px;
          font: 12px;
          color: #FFFFFF;
          position: relative;
          position:fixed;
          top: 40%;
          left: 50%;
          z-index:99;
          text-align: center;
          vertical-align: middle;
      }
      .post-share span{
          width: 15px;
          height: 18px;
          padding: 3px;
          display: block;
          position: absolute;
          top: -24px;
          right: 0;
          background-color: #080563;
          color: #FFFFFF;
          font-weight: bold;
          vertical-align: middle;
          font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
          text-align: center;
          text-indent: 0;
    
      }
    
      .social-buttons-text {
        font-size: 4px;
        color: #FFFFFF;
        float: left;
        margin: 0px;
        padding: 0px;
        text-align: left;
      }
      .sphere{
        height: 80px;
        width:80px;
        border-radius: 50%;
      }
    
      /*  for circle */
    
      * {
        padding: 0px;
        margin: 0px;
        transition: 1s;
      }
    
      html {
        background-color: hsla(190, 60%, 50%,1);
        overflow: hidden;
      }
    
      #wrapper {
        margin: 200px auto;
        height: 200px;
        width: 600px;
      }
      .bubble {
        border-radius: 100%;
        height: 40px;
        width: 40px;
        display: inline-block;
        margin: 0px 15px 0px 15px;
      }
    
      .animate {
        animation: scaleWobble 2s infinite alternate ease;
      }
    
      #red {
        background-color: hsla(350, 50%, 50%, 1);
      }
    
      #yellow {
        background-color: hsla(70, 50%, 50%, 1);
      }
    
      #green {
        background-color: hsla(120, 70%, 40%, 1);
      }
    
      @keyframes scaleWobble {
        from {
          height: 100px;
          width: 100px;
        }
        to {
          height: 125px;
          width: 125px;
        }
      }
    
      /**
       * Position icons into circle (SO)
       * http://stackoverflow.com/q/12813573/1397351 
       */
      .circle-container {
        position: relative;
        width: 24em;
        height: 24em;
        padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
        border-radius: 50%;
        margin: 1.75em auto 0;
      }
      .circle-container a {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 4em;
          height: 4em;
          margin: -2em;
      }
      .circle-container img { display: block; width: 100%; }
        .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
        .deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
        .deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
        .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
        .deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
        .deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
        .deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
        .deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
        .deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
        .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
        .deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
        .deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
        .deg180 { transform: translate(-12em); }
        .deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
        .deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
        .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
        .deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
        .deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
        .deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
        .deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
        .deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
      /* this is just for showing the angle on hover */
      .circle-container a:not(.center)::before {
          position: absolute;
          width: 7em;
          color: white;
          opacity: 0;
    }
      .circle-container a:hover:before { opacity: 1; }
    
      /* this is for showing the circle on which the images are placed */
      .circle-container:after {
        position: absolute;
        top: 2.8em; left: 2.8em;
        width: 24em; height: 24em;
        border: dashed 1px deeppink;
        border-radius: 50%;
        opacity: .3;
        pointer-events: none;
        content: ''; 
      }
      .circle-container:hover:after{
          opacity: 1; 
      }
    
      .circle-container a:not(.center)::after {
          position: absolute;
          left: 50%;
          box-shadow: 0 0 .5em .5em white;
          margin: -2px;
          background: #fffea1;
          content: attr(myattri);
    }
    
      .circle-container:hover a:after { opacity: 1; }
      .circle-container a:hover:after { opacity: .3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
      <span><a href="javascript:toggleDiv('myContent');">+</a></span>
    </span>  
    
    <div id="myContent" class='circle-container' style="display:none">
    </div>

Answer 1

这可能不是您正在寻找的 100% 答案，但似乎无论您在做什么，都可能使它变得比需要的更复杂。

您可以使用带有 border-radius:50%;

的 div 创建这些圆圈

看这个例子，我认为它用更少的代码实现了你想要的。

JsFiddle 演示:https://jsfiddle.net/yfpnbf4z/3/

$("#circleToggle").click(function() {
  $("#circle1").fadeToggle("slow");
  $("#circle2").fadeToggle("slow");
  if ($("#circle1").is(":hidden")) {
    $("#circleToggle").html("+");
  } else {
    $("#circleToggle").html("-");
  }
});

.container {
  background: #333;
  position: relative;
  height: 500px;
  width: 500px;
}
.button {
  position: absolute;
  left: 230px;
  top: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  background: #fff;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
}
.circle {
  border-radius: 50%;
  border: 1px dashed red;
  display: none;
}
#circle1 {
  position: absolute;
  top: 150px;
  left: 150px;
  height: 200px;
  width: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
}
#circle2 {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 400px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="button" id="circleToggle">+</div>
  <div class="circle" id="circle1">Some data</div>
  <div class="circle" id="circle2"></div>
</div>

希望对你有用