将图标放入圈子

我怎样才能将几个<img>元素放在另一个圆圈中,并且这些元素都是可点击的链接? 我希望它看起来像下面的图片,但我不知道如何达到这个效果。

期望的结果

这甚至有可能吗?

是的,这只是使用CSS的可能性和非常简单。 你只需要清楚你想要的图像链接angular度(我已经添加了一段代码,只是为了显示angular度,无论你什么时候hover其中之一)。

演示

你首先需要一个包装。 我把它的直径设置为24emwidth: 24em; height: 24em;这样做),你可以将其设置为任何你想要的。 你给它的position: relative;

然后,您将链接定位在包装中心的图像,无论水平还是垂直。 你可以通过设置position: absolute; 然后top: 50%; left: 50%; top: 50%; left: 50%;margin: -2em; (其中2em是图像链接宽度的一半,我已经设置为4em – 再次,您可以将其更改为任何您想要的,但不要忘记在这种情况下更改边距)。

然后,您决定想要与图像链接的angular度,然后添加一个类deg{desired_angle} (例如deg0deg45或其他)。 然后为每个这样的类应用链式CSS转换,如下所示:

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

{desired_angle}replace{desired_angle}

第一次旋转变换旋转对象及其轴,旋转变换将对象沿着旋转的X轴进行平移,第二次旋转变换将对象带回到位置 – 演示以说明这是如何工作的

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

HTML

 <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> 

相关的CSS

 .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); } 

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


编辑与IE8和更老的回退的例子 (在IE8和IE7中testing)

这是没有绝对定位的简单解决scheme:

 .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/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> </div> <div class="row"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> </div> <div class="row"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> <img src="https://ssl.gstatic.com/s2/ozhttp://img.dovov.comfaviconr2.ico" alt="" width="64" height="64"> </div> </div>​ 

http://jsfiddle.net/mD6H6/

没有办法神奇地将可点击的项目放在另一个CSS元素的圆圈内。 我如何做到这一点的方式是使用一个position:relative;容器position:relative; 。 然后把所有的元素放在position:absolute; 并使用topleft来定位它的位置。

即使你没有在你的标签中放置jQuery ,最好使用jQuery / JavaScript来做这件事。

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

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

之后,可以通过使用centerImage的offset()减去容器的offset()来放置其他元素。 给你的图像的确切的topleft

 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 }); 

我在这里做的是把元素对于中心图像。 希望这可以帮助。

build立@安娜的优秀答案,我创build了这个dynamic版本,允许您添加和从DOM删除元素,并保持元素之间的相称间距 – 检查我的小提琴: https : //jsfiddle.net/skwidbreth/q59s90oy/

html

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <ul id="list"></ul> <button id="add-item">Add item</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="main.js"></script> </body> </html> 

style.css

 #list{ background-color: blue; height: 30vw; width: 30vw; border-radius: 50%; position: relative; } .list-item{ list-style: none; background-color: red; height: 5vw; width: 5vw; position: absolute; top: 50%; left: 50%; } 

main.js

 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, -15vw) 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); }); 

你当然可以用纯CSS或使用JavaScript。 我的build议:

  • 如果你已经知道图像编号永远不会改变只是计算你的风格,并与普通的CSS(优点:更好的performance,非常可靠)

  • 如果这个数字可以在您的应用程序中dynamic变化,或者将来可能会变化,请使用Js解决scheme(优点:更具前瞻性)

我有一个类似的工作要做,所以我创build了一个脚本,并在Github上为任何可能需要它的人开源。 它只接受一些configuration值,并输出你需要的CSS代码。

如果你想去Js的解决scheme这里是一个简单的指针,可以对你有用。 使用这个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; } 

您可以沿着这些线创build一个快速的function:

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

你可以在这里看到一个实例

你可以这样做: 小提琴

不要介意定位,它是一个快速的例子