Javascript 如何开发jquery

有谁能给我指出一个发展方向吗

---

进入我们的团队菜单。我已经查找了一些jquery和d3 bubble插件，但找不到任何类似的插件。

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

HTML:

要添加悬停比例，请执行以下操作：

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

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

资料来源：

---

谢谢，我需要一个js部件。单击气泡时，隐藏特定气泡，并显示其他气泡。

@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%;
    }
  }
}

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