谁能给我指出如何开发这样的东西的方向。
https://www.fcinq.com/转到我们的团队菜单。我已经查找了一些 jquery 和 d3 bubble 插件,但找不到类似的东西。
最佳答案
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
来源:
关于javascript - 如何开发可选择的气泡jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49526805/