104

いくつかの<img>要素を別の要素の周りの円に配置し、それらの要素をすべてクリック可能なリンクにする方法を教えてください。下の写真のように見せたいのですが、どうすればその効果が得られるのかわかりません。

望ましい結果

これも可能ですか？

4

8 に答える 8

209

2020ソリューション

これが私が最近使っているより現代的な解決策です。

まず、画像の配列からHTMLを生成します。HTMLがPHP、JS、一部のHTMLプリプロセッサなどを使用して生成されているかどうかにかかわらず、背後にある基本的な考え方は同じであるため、これはそれほど重要ではありません。

これを行うPugコードは次のとおりです。

//- start with an array of images, described by url and alt text
- let imgs = [
-   {
-       src: 'image_url.jpg', 
-       alt: 'image alt text'
-   } /* and so on, add more images here */
- ];
- let n_imgs = imgs.length;
- let has_mid = 1; /* 0 if there's no item in the middle, 1 otherwise */
- let m = n_imgs - has_mid; /* how many are ON the circle */
- let tan = Math.tan(Math.PI/m); /* tangent of half the base angle */

.container(style=`--m: ${m}; --tan: ${+tan.toFixed(2)}`)
    - for(let i = 0; i < n_imgs; i++)
        a(href='#' style=i - has_mid >= 0 ? `--i: ${i}` : null)
          img(src=imgs[i].src alt=imgs[i].alt)

生成されたHTMLは次のようになります（もちろん、HTMLを手動で作成することもできますが、後で変更を加えるのは面倒です）。

<div class="container" style="--m: 8; --tan: 0.41">
  <a href='#'>
    <img src="image_mid.jpg" alt="alt text"/>
  </a>
  <a style="--i: 1">
    <img src="first_img_on_circle.jpg" alt="alt text"/>
  </a>
  <!-- the rest of those placed on the circle -->
</div>

CSSでは、画像のサイズを決定します。たとえば、8em。--mアイテムは円上に配置され、エッジのポリゴンのエッジの中央にある場合は、--mすべてが円に接しています。

それを描くのが難しい場合は、スライダーをドラッグして選択したエッジの数を持つさまざまなポリゴンの内接円と外接円を作成するこのインタラクティブなデモで遊ぶことができます。

六角形の内接円と外接円

これは、コンテナのサイズが円の半径の2倍に画像のサイズの2倍を加えたものでなければならないことを示しています。

半径はまだわかりませんが、エッジの数（したがって、事前に計算されてカスタムプロパティとして設定された底角の半分の接線--tan）とポリゴンエッジがわかれば、半径を計算できます。ポリゴンのエッジを画像の最小サイズにする必要がありますが、側面に残す量は任意です。両側に半分の画像サイズがあるとしましょう。したがって、ポリゴンのエッジは画像サイズの2倍になります。これにより、次のCSSが得られます。

.container {
  --d: 6.5em; /* image size */
  --rel: 1; /* how much extra space we want between images, 1 = one image size */
  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
  --s: calc(2*var(--r) + var(--d)); /* container size */
  position: relative;
  width: var(--s); height: var(--s);
  background: silver /* to show images perfectly fit in container */
}

.container a {
  position: absolute;
  top: 50%; left: 50%;
  margin: calc(-.5*var(--d));
  width: var(--d); height: var(--d);
  --az: calc(var(--i)*1turn/var(--m));
  transform: 
    rotate(var(--az)) 
    translate(var(--r))
    rotate(calc(-1*var(--az)))
}

img { max-width: 100% }

変換チェーンがどのように機能するかの説明については、古いソリューションを参照してください。

このように、画像の配列に画像を追加または削除すると、新しい数の画像が円上に自動的に配置され、等間隔に配置され、コンテナのサイズも調整されます。このデモでこれをテストできます。

古いソリューション（歴史的な理由で保存）

はい、CSSだけを使用することは非常に可能で非常に簡単です。画像とのリンクが必要な角度を明確にする必要があります（画像の1つにカーソルを合わせるたびに角度を表示するために、最後にコードを追加しました）。

最初にラッパーが必要です。私はその直径を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}に置き換えます。045

最初のrotate変換はオブジェクトとその軸を回転させ、translate変換は回転したX軸に沿ってオブジェクトを変換し、2番目のrotate変換はオブジェクトを元の位置に戻します。

この方法の利点は、柔軟性があることです。現在の構造を変更せずに、さまざまな角度で新しい画像を追加できます。

コードスニペット

    .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をさらに単純化することもできます。

編集：IE8以前のフォールバックの例（IE8およびIE7でテスト済み）

于 2012-10-10T10:42:29.593 に答える
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/

于 2012-10-10T07:11:58.850 に答える
14

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

于 2017-01-10T19:42:34.750 に答える
12

@Anaによって提案されたソリューションを使用する：

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

プレーンJavaScriptを使用して円を動的に配置する次のjsFiddleを作成しました（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>

于 2019-03-17T22:02:36.697 に答える
8

これは、ここの例からReactで作成したバージョンです。

CodeSandboxの例

import React, { useRef, useEffect } from "react";

import "./styles.css";

export default function App() {
  const graph = useRef(null);

  useEffect(() => {
    const ciclegraph = graph.current;
    const circleElements = ciclegraph.childNodes;

    let angle = 360 - 90;
    let dangle = 360 / circleElements.length;

    for (let i = 0; i < circleElements.length; i++) {
      let circle = circleElements[i];
      angle += dangle;
      circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth /
        2}px) rotate(-${angle}deg)`;
    }
  }, []);

  return (
    <div className="App">
      <div className="ciclegraph" ref={graph}>
        <div className="circle" />
        <div className="circle" />
        <div className="circle" />
        <div className="circle" />
        <div className="circle" />
        <div className="circle" />
      </div>
    </div>
  );
}
于 2020-06-19T08:23:50.447 に答える
7

あなたは確かに純粋なCSSでそれを行うか、JavaScriptを使用することができます。私のおすすめ：

  • 画像の数が決して変わらないことをすでに知っている場合は、スタイルを計算してプレーンなcssを使用してください（長所：パフォーマンスが向上し、信頼性が非常に高い）

  • 数がアプリ内で動的に変化する可能性がある場合、または将来変化する可能性がある場合は、Jsソリューションを使用してください（長所：より将来性があります）

同様の仕事をしていたので、スクリプトを作成して、Githubで必要な人のためにオープンソース化しました。いくつかの構成値を受け入れ、必要なCSSコードを出力するだけです。

Jsソリューションを利用したい場合は、ここに役立つ簡単なポインタがあります。このhtmlを開始点として#boxコンテナとして使用.dotし、中央にimage / 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;
    }

ここで実際の例を見ることができます

于 2015-07-11T11:19:41.443 に答える
5

CSSを使用して、クリック可能なアイテムを別の要素の周りの円に魔法のように配置する方法はありません。これを行う方法は、。を含むコンテナーを使用することposition:relative;です。次に、すべての要素をposition:absolute;使用してtop配置し、その場所leftをターゲットにします。

を配置していない場合でも、これには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 
});

ここで行ったことは、centerImageを基準にして要素を配置することです。お役に立てれば。

于 2012-10-10T06:59:08.007 に答える
1

あなたはこのようにそれを行うことができます：フィドル

ポジショニングを気にしないでください、その簡単な例

于 2012-10-10T07:18:07.957 に答える