定位小图像在圆形阵列周围的大图像
问题描述:
我试图找到一种干净的方式,以循环的方式在大图像周围浮动多个图像气泡。定位小图像在圆形阵列周围的大图像
每张图片可能不会超过六个泡泡,但我想要找到一种递归且响应的方式来定位这些泡泡任意大小的父图像。这些父图像将具有相同的高度/宽度并且不低于100px。 (100 x 100,130 x 130等)
不确定如何做到这一点,同时使其响应屏幕大小,并支持所有主要浏览器。我也希望如果这可以用纯CSS/sass来完成,并且不需要外部库。
到目前为止的代码:http://jsfiddle.net/qatkr261/1/
HTML
<div id="body">
<div id="background">
<div class="company-container">
<img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=120%C3%97120&w=120&h=120" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
</div>
<div class="company-container">
<img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=120%C3%97120&w=120&h=120" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
</div>
</div>
</div>
CSS(#body和#background只是演示容器)
#body {
height:500px;
width:500px;
}
#background {
background:#F9F9F9;
}
.company-container {
display:inline-block;
padding:20px;
}
.company {
border-radius: 80px;
display: block;
height: 130px;
width: 130px;
margin: 15px auto;
background:#E5E5E5;
}
.company:hover {
transform: scale(1.2);
cursor:pointer;
}
.company-side-bubble {
border-radius: 30px;
width: 40px;
height: 40px;
position:absolute;
top:0;
border: solid 1px red;
}
.company-side-bubble:hover {
transform: scale(1.2);
cursor:pointer;
}
.company-side-bubble:nth-of-type(2) {
margin-top: 15px;
margin-left: 44px;
}
.company-side-bubble:nth-of-type(3) {
margin-top: 34px;
margin-left: 91px;
}
.company-side-bubble:nth-of-type(4) {
margin-left: 109px;
margin-top: 81px;
}
答
你可以做,使用百分比而不是以像素为单位。
此外,您还需要使用translateX和translateY来补偿小图像的宽度和高度。
在这里,我已经做了你:http://jsfiddle.net/qatkr261/2/
.company-side-bubble:nth-of-type(2) {
top: 0%;
left: 50%;
transform: translateX(-50%) translateY(25%);
}
.company-side-bubble:nth-of-type(3) {
top: 25%;
right: 25%;
transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(4) {
right: 0%;
top: 50%;
transform: translateX(-25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(5) {
top: 75%;
right: 25%;
transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(6) {
bottom: 0%;
left: 50%;
transform: translateX(-50%) translateY(-25%);
}
.company-side-bubble:nth-of-type(7) {
bottom: 25%;
left: 25%;
transform: translateX(-50%) translateY(50%);
}
.company-side-bubble:nth-of-type(8) {
top: 50%;
left: 0%;
transform: translateX(25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(9) {
top: 25%;
left: 25%;
transform: translateX(-50%) translateY(-50%);
}
我已经改变也对其他类的一些CSS,使其工作,最重要的是:。公司没有顶:0了,它是保证金现在是统一的(四边相等)和已经长大,。公司集装箱丢失填充(通过。公司保证金补偿),并获得位置:相对
UPDATE:
如果您想要气泡传播,你将需要为每一个额外的选择器如下:
.company:hover ~ .company-side-bubble:nth-of-type(2) {
top: -5%;
}
.company:hover ~ .company-side-bubble:nth-of-type(3) {
top: 20%;
right: 20%;
}
.company:hover ~ .company-side-bubble:nth-of-type(4) {
right: -5%;
}
...
非常感谢你!快速的问题是,当你将鼠标悬停在主图像上时,它会略微增长。是否难以平等推出这个悬停影响的小泡沫,以便它们也展开? – Austin
我会更新我的答案,以解释如何做到这一点。 – emiliopedrollo
对不起再次打扰,我还有一个简单的问题。我正计划使用变换来增长边泡,但由于我们已经使用变换来移动它们,所以我怎么才能让它们稍微像主图像一样在徘徊时增长呢? – Austin