Расположить значки в круг

Как я могу поместить несколько элементов <img> в круг вокруг другого, и все эти элементы также будут доступны для ссылок? Я хочу, чтобы это было похоже на рисунок ниже, но я понятия не имею, как достичь этого эффекта.

Desired Result

Возможно ли это?

ОТВЕТЫ

Ответ 1

Да, это очень возможно и очень просто, используя только CSS. Вам просто нужно иметь в виду углы, по которым вам нужны ссылки с изображениями (я добавил фрагмент кода в конце, чтобы показывать углы всякий раз, когда вы наводите один из них).

демонстрация

Сначала вам нужна оболочка. Я устанавливаю его диаметр 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, а второе преобразование вращения возвращает объект в положение - , чтобы проиллюстрировать, как это работает.

Преимущество этого метода в том, что он является гибким. Вы можете добавлять новые изображения под разными углами без изменения текущей структуры.

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

Кроме того, вы можете упростить HTML, используя фоновые изображения для ссылок вместо использования тегов img.

РЕДАКТИРОВАТЬ: пример с резервностью для IE8 и старше (протестирован в IE8 и IE7)

Ответ 2

Вот простое решение без абсолютного позиционирования:

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

Ответ 3

Невозможно магически разместить кликабельные элементы в круге вокруг другого элемента с помощью 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;
}

После этого вы можете поместить другие элементы вокруг него, используя offset() объекта centerImage минус 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 
});

То, что я здесь сделал, заключается в размещении элементов relative в centerImage. Надеюсь, это поможет.

Ответ 4

Создание @Ana отличный ответ, я создал эту динамическую версию, которая позволяет добавлять и удалять элементы из 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);
});

Ответ 5

Вы можете сделать это с чистым css или использовать JavaScript. Мое предложение:

  • Если вы уже знаете, что номер изображения никогда не изменится, просто вычислите свои стили и пойдите с простым css (профи: лучшие показатели, очень надежны)

  • Если число может варьироваться либо динамически в вашем приложении, либо просто может измениться в будущем с помощью решения Js (профи: более надежное будущее)

У меня была аналогичная работа, поэтому я создал script и откликнулся здесь, на 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;
}

Вы можете увидеть живой пример здесь

Ответ 6

Вы можете сделать это следующим образом: fiddle

Не обращайте внимания на позиционирование, его быстрый пример