将图标放入圈子
我怎样才能将几个<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; }
你可以在这里看到一个实例
你可以这样做: 小提琴
不要介意定位,它是一个快速的例子