javascript - 如何开发可选择的气泡jquery

Question

谁能给我指出如何开发这样的东西的方向。

https://www.fcinq.com/转到我们的团队菜单。我已经查找了一些 jquery 和 d3 bubble 插件，但找不到类似的东西。

Answer 1

D3 用于数据可视化，您可以使用纯 html 和 css 来完成此布局，如下例所示:

HTML:

<a class="big brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="big brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="big middle brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="empty brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>
<a class="brick"><div></div></a>

CSS:

@import "compass/css3";

/*  Authors     Craig Rozynski craigrozynski.com, dinosaurswithlaserz.com 
                            Marco Lago marcolago.com
        Version     2.0 2011-07-15 */

/* CSS Reset (customised) */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, small, strong {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
body { display: block; }
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
::-moz-selection{ background: #3b7cbf; color: #fff; text-shadow: none; }
::selection { background: #3b7cbf; color: #fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #3b7cbf; }
.ie7 img { -ms-interpolation-mode: bicubic; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/* Primary Styles */

body {
    padding: 10px;
    font: 1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
    color: #515047;
    background-color: #F2F1DB;
}
a, a:link, a:visited, a:active, .title, .category {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    text-decoration: none;
}
h1, h2, h3 { font-size: 3em; }
h1 {
    color: #515047;
    line-height: 0.8;
    letter-spacing: -0.05em;
}
h2 {
    color: #d4d3c0;
    line-height: 0.9;
    letter-spacing: -0.05em;
}
h3 {
    color: #3b7cbf;
    line-height: 0.9;
    letter-spacing: -0.05em;
}
p {
    font-size: 1.25em; 
    line-height: 1.15;
    margin: 0.75em 0;
    color: #b9b8a4;
}
small {
    font-size: 1em; 
    color: #3b7cbf;
}
img { max-width: 100%; }

/* Media Queries */

/* Column Control Media Queries */

@media screen and (min-width:500px) {
    body {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px;
        overflow: hidden;
    }

    div:hover { background-color: #e5e4cf; }

    a, a:link, a:visited, a:active, .title, .category {
        position: relative;
        top: 0;
        overflow: hidden;
    }

    div, h2 { 
    position: absolute; 
    top: 0;
    left: 0;
    background: #999;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

/* Two Column */

@media screen and (min-width:500px) {
    .brick, .big.middle.brick {
        width: 47%;
        margin: 0 2% 3% 0;
        padding-bottom: 47%;
    }
  .empty.brick { display: none; }
  .big.brick {
    width: 100%;
    padding-bottom: 100%;
  }

}

/* Four Column */

@media screen and (min-width:1200px) {
    .brick {
        width: 23%;
        margin: 0 2% 3% 0;
        padding-bottom: 23%;
    }
  .empty.brick { display: block; visibility: hidden; }
  .big.brick, .big.middle.brick {
    overflow: visible;
    width: 23%;
    padding-bottom: 23%;
    div {
      position: absolute;
      width: 208%;
      height: 208%;
    }
  }
}

添加 onHover 比例:

 .brick:hover
  {
       -webkit-transform: scale(1.3);
       -ms-transform: scale(1.3);
        transform: scale(1.3);
    }

对于隐藏/显示气泡，您应该根据您的设计添加气泡类，并使用带动画的 Jquery 控制隐藏/显示 onClick 事件的气泡:

http://api.jquery.com/hide/#hide-duration-easing-complete

http://api.jquery.com/show/#show-duration-easing-complete

来源:

https://codepen.io/rodaine/pen/uEJwI

https://codepen.io/rowruffdesign/pen/rbzhB