将图标放入圈子
我怎样才能将几个<img>元素放在另一个圆圈中，并且这些元素都是可点击的链接？ 我希望它看起来像下面的图片，但我不知道如何达到这个效果。
这甚至有可能吗？
是的，这只是使用CSS的可能性和非常简单。 你只需要清楚你想要的图像链接angular度（我已经添加了一段代码，只是为了显示angular度，无论你什么时候hover其中之一）。
演示
你首先需要一个包装。 我把它的直径设置为24em （ width: 24em; height: 24em;这样做），你可以将其设置为任何你想要的。 你给它的position: relative; 。
然后，您将链接定位在包装中心的图像，无论水平还是垂直。 你可以通过设置position: absolute; 然后top: 50%; left: 50%; top: 50%; left: 50%; 和margin: -2em; （其中2em是图像链接宽度的一半，我已经设置为4em – 再次，您可以将其更改为任何您想要的，但不要忘记在这种情况下更改边距）。
然后，您决定想要与图像链接的angular度，然后添加一个类deg{desired_angle} （例如deg0或deg45或其他）。 然后为每个这样的类应用链式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>
没有办法神奇地将可点击的项目放在另一个CSS元素的圆圈内。 我如何做到这一点的方式是使用一个position:relative;容器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 });
我在这里做的是把元素相对于中心图像。 希望这可以帮助。
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; }
你可以在这里看到一个实例
你可以这样做： 小提琴
不要介意定位，它是一个快速的例子
