将图标放入圈子演示

问题描述 投票：88回答：7

如何将几个<img>元素放置在另一个周围的圆圈中，并将这些元素都设置为可点击链接？我希望它看起来像下面的图片，但我不知道如何实现这种效果。

这甚至可能吗？

html css html5 css3
7个回答
180
投票

是的，使用CSS非常简单，非常简单。你只需要清楚你想要与图像链接的角度（我在末尾添加了一段代码，只是为了在你将其中一个悬停时显示角度）。

demo

你首先需要一个包装器。我将它的直径设置为24em（width: 24em; height: 24em;就是这样），你可以将它设置为你想要的任何东西。你给它position: relative;。

然后，您可以在水平和垂直方向上将链接与图像放置在该包装的中心。你可以通过设置position: absolute;然后top: 50%; left: 50%;和margin: -2em;（其中2em是图像的链接宽度的一半，我已经设置为4em - 再次，您可以将其更改为您想要的任何内容，但不要忘记在这种情况下改变保证金）。

然后，您决定要与图像建立链接的角度，并添加一个类deg{desired_angle}（例如deg0或deg45或其他）。然后对于每个这样的类，您应用链式CSS变换，如下所示：

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

在哪里用{desired_angle}，0等替换45 ......

第一个旋转变换旋转对象及其轴，平移变换沿旋转的X轴平移对象，第二个旋转变换将对象带回位置 - demo to illustrate how this works。

这种方法的优点是它很灵活。您可以在不改变当前结构的情况下以不同角度添加新图像。

代码链

    .circle-container {
    	position: relative;
    	width: 24em;
    	height: 24em;
    	padding: 2.8em;
        /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    	border: dashed 1px;
    	border-radius: 50%;
    	margin: 1.75em auto 0;
    }
    .circle-container a {
    	display: block;
    	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 */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
    <div class='circle-container'>
    	<a href='#' class='center'><img src='image.jpg'></a>
    	<a href='#' class='deg0'><img src='image.jpg'></a>
    	<a href='#' class='deg45'><img src='image.jpg'></a>
    	<a href='#' class='deg135'><img src='image.jpg'></a>
    	<a href='#' class='deg180'><img src='image.jpg'></a>
    	<a href='#' class='deg225'><img src='image.jpg'></a>
    	<a href='#' class='deg315'><img src='image.jpg'></a>
    </div>

此外，您可以通过使用链接的背景图像而不是使用img标记来进一步简化HTML。

编辑：example with fallback for IE8 and older（在IE8和IE7中测试）

17
投票

这是没有绝对定位的简单解决方案：

.container .row {
  margin: 20px;
  text-align: center;
}

.container .row img {
  margin: 0 20px;
}
<div class="container">
  <div class="row">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
  </div>
  <div class="row">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
  </div>
  <div class="row">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
    <img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico" alt="" width="64" height="64">
  </div>
</div>

http://jsfiddle.net/mD6H6/

7
投票

建立@Ana的优秀答案，我创建了这个动态版本，允许您添加和删除DOM中的元素并保持元素之间的比例间距 - 请查看我的小提琴：https://jsfiddle.net/skwidbreth/q59s90oy/

var list = $("#list");

var updateLayout = function(listItems) {
  for (var i = 0; i < listItems.length; i++) {
    var offsetAngle = 360 / listItems.length;
    var rotateAngle = offsetAngle * i;
    $(listItems[i]).css("transform", "rotate(" + rotateAngle + "deg) translate(0, -200px) rotate(-" + rotateAngle + "deg)")
  };
};

$(document).on("click", "#add-item", function() {
  var listItem = $("<li class='list-item'>Things go here<button class='remove-item'>Remove</button></li>");
  list.append(listItem);
  var listItems = $(".list-item");
  updateLayout(listItems);

});

$(document).on("click", ".remove-item", function() {
  $(this).parent().remove();
  var listItems = $(".list-item");
  updateLayout(listItems);
});
#list {
  background-color: blue;
  height: 400px;
  width: 400px;
  border-radius: 50%;
  position: relative;
}

.list-item {
  list-style: none;
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<ul id="list"></ul>
<button id="add-item">Add item</button>
5
投票

使用CSS无法将可点击的项目神奇地放置在围绕另一个元素的圆圈中。我如何做到这一点的方法是使用一个带position:relative;的容器。然后用position:absolute;放置所有元素，并使用top和left来定位它的位置。

即使您没有在标签中放置jquery，最好使用jQuery / javascript。

第一步是使用position:relative;将中心图像完美地放在容器的中心。

#centerImage {
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  margin: -100px 0 0 -100px;
}

之后，您可以使用centerImage的offset()减去容器的offset()将其他元素放在它周围。给你精确的图像top和left。

var left = $('#centerImage').offset().left - $('#centerImage').parent().offset().left;
var top = $('#centerImage').offset().top - $('#centerImage').parent().offset().top;

$('#surroundingElement1').css({
  'left': left - 50,
  'top': top - 50 
});

$('#surroundingElement2').css({
  'left': left - 50,
  'top': top 
});

$('#surroundingElement3').css({
  'left': left - 50,
  'top': top + 50 
});

我在这里做的是将元素放在相对于centerImage的位置。希望这可以帮助。

4
投票

您当然可以使用纯CSS或使用JavaScript。我的建议：

  • 如果您已经知道图像编号永远不会改变，只需计算您的样式并使用普通的css（专业：更好的表现，非常可靠）
  • 如果数量可以在您的应用程序中动态变化，或者将来可能会有所不同，请使用Js解决方案（专业人员：更具前瞻性）

我有类似的工作要做，所以我创建了一个脚本，并为任何可能需要它的人开源here on Github。它只接受一些配置值，只需输出您需要的CSS代码。

如果你想找到Js解决方案，这里有一个对你有用的简单指针。使用这个html作为起点#box容器和.dot中间的图像/ div你想要所有其他图像：

启动html：

<div id="box">
  <div class="dot"></div>
  <img src="my-img.jpg">
  <!-- all the other images you need-->
</div>

开始Css：

 #box{
  width: 400px;
  height: 400px;
  position: relative;
  border-radius: 100%;
  border: 1px solid teal;
}

.dot{
    position: absolute;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
    background: rebeccapurple;
}
img{
  width: 40px;
  height: 40px;
  position: absolute;
}

您可以按以下方式创建快速功能：

var circle = document.getElementById('box'),
    imgs = document.getElementsByTagName('img'),
    total = imgs.length,
    coords = {},
    diam, radius1, radius2, imgW;

// get circle diameter
// getBoundingClientRect outputs the actual px AFTER transform
//      using getComputedStyle does the job as we want
diam = parseInt( window.getComputedStyle(circle).getPropertyValue('width') ),
radius = diam/2,
imgW = imgs[0].getBoundingClientRect().width,
// get the dimensions of the inner circle we want the images to align to
radius2 = radius - imgW

var i,
    alpha = Math.PI / 2,
    len = imgs.length,
    corner = 2 * Math.PI / total;

// loop over the images and assign the correct css props
for ( i = 0 ; i < total; i++ ){

  imgs[i].style.left = parseInt( ( radius - imgW / 2 ) + ( radius2 * Math.cos( alpha ) ) ) + 'px'
  imgs[i].style.top =  parseInt( ( radius - imgW / 2 ) - ( radius2 * Math.sin( alpha ) ) ) + 'px'

  alpha = alpha - corner;
}

你可以看到一个实例here

1
投票

你可以这样做：fiddle

不介意定位，这是一个快速的例子

0
投票

使用@Ana提出的解决方案：

transform: rotate(${angle}deg) translate(${radius}px) rotate(-${angle}deg)

我创建了以下jsFiddle，它使用普通JavaScript动态放置圆圈（jQuery版本也可用）。

它的工作方式非常简单：

document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{
  let circles = ciclegraph.querySelectorAll( '.circle' )
  let angle = 360-90, dangle = 360 / circles.length
  for( let i = 0; i < circles.length; ++i ){
    let circle = circles[i]
    angle += dangle
    circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
  }
})
.ciclegraph {
  position: relative;
  width: 500px;
  height: 500px;
  margin: calc(100px / 2 + 0px);
}

.ciclegraph:before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border: 2px solid teal;
  width: calc( 100% - 2px * 2);
  height: calc( 100% - 2px * 2 );
  border-radius: 50%;
}

.ciclegraph .circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px;
  height: 100px;
  margin: calc( -100px / 2 );
  background: teal;
  border-radius: 50%;
}
<div class="ciclegraph">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.