আইকনগুলিকে বৃত্তে স্থান দিন

Question 1

আমি কীভাবে বেশ কয়েকটি <img>উপাদানকে অন্য চেনাশোনাতে একটি বৃত্তে স্থাপন করতে পারি এবং সেই উপাদানগুলিকেও ক্লিকযোগ্য লিঙ্কগুলিতে রাখতে পারি? আমি এটি নীচের ছবির মতো দেখতে চাই, তবে কীভাবে এই প্রভাবটি অর্জন করতে হয় সে সম্পর্কে আমার কোনও ধারণা নেই।

প্রত্যাশিত ফল

এটা কি সম্ভব?

Question 2

2020 সমাধান

আমি এই দিনগুলিতে ব্যবহার করছি আরও একটি আধুনিক সমাধান।

আমি ইমেজগুলির একটি অ্যারে থেকে শুরু করে এইচটিএমএল তৈরি করে শুরু করি। এইচটিএমএল পিএইচপি, জেএস, কিছু এইচটিএমএল প্রিপ্রসেসর ব্যবহার করে তৈরি করা হয়েছে কিনা ... যাই হোক না কেন পিছনের মূল ধারণাটি একই কারণ এটি কম গুরুত্বপূর্ণ।

এখানে পগ কোড রয়েছে যা এটি করবে:

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

উত্পন্ন এইচটিএমএলটি নীচের মতো দেখায় (এবং হ্যাঁ, আপনি নিজেও এইচটিএমএল লিখতে পারেন, তবে এটি পরে পরিবর্তনগুলি করতে ব্যথা হতে পারে):

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

সিএসএসে আমরা চিত্রগুলির জন্য কোনও আকারের বিষয়ে সিদ্ধান্ত নিই, আসুন 8em। --mআইটেম একটি বৃত্ত উপর স্থান হয় এবং যদি তারা একটি বহুভুজ প্রান্ত মাঝখানে করছি এটা --mপ্রান্ত, যার মধ্যে সব চেনাশোনাতে স্পর্শক হয়।

যদি এটি চিত্রিত করতে আপনার যদি কোনও শক্ত সময় হয় তবে আপনি এই ইন্টারেক্টিভ ডেমো দিয়ে খেলতে পারেন যা বিভিন্ন বহুভুজগুলির জন্য সার্কেল এবং সার্কিট তৈরি করে যার স্লাইডারটি টেনে আপনি পছন্দ করেছেন।

এটি আমাদের জানায় যে ধারকটির আকার অবশ্যই বৃত্তের ব্যাসার্ধের দ্বিগুণ এবং চিত্রগুলির দ্বিগুণ আকারের হতে হবে।

আমরা এখনও ব্যাসার্ধটি জানি না, তবে আমরা যদি প্রান্তগুলি (এবং অতএব অর্ধেক বেস কোণের স্পর্শক, পূর্বনির্ধারিত এবং কাস্টম সম্পত্তি হিসাবে সেট --tan) এবং বহুভুজ প্রান্তটি জানি তবে আমরা এটি গণনা করতে পারি । আমরা সম্ভবত বহুভুজ প্রান্তটি চিত্রগুলির কমপক্ষে আকারের হতে চাই, তবে আমরা পক্ষগুলিতে কতটা রেখে দেই তা নির্বিচারে। ধরা যাক যে প্রতিটি পাশেই আমাদের অর্ধেক আকারের আকার রয়েছে, সুতরাং বহুভুজ প্রান্তটি চিত্রের আকারের দ্বিগুণ। এটি আমাদের নিম্নলিখিত সিএসএস দেয়:

.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% }

ট্রান্সফর্ম চেইন কীভাবে কাজ করে তার ব্যাখ্যার জন্য পুরানো সমাধান দেখুন।

এইভাবে, চিত্রগুলির অ্যারে থেকে কোনও চিত্র যুক্ত করা বা সরিয়ে ফেলা স্বয়ংক্রিয়ভাবে একটি বৃত্তে নতুন সংখ্যক চিত্রগুলি এমনভাবে সাজিয়ে তোলে যাতে তারা সমানভাবে ব্যবধানযুক্ত হয়ে যায় এবং ধারকটির আকারও সামঞ্জস্য করে। আপনি এই ডেমোতে এটি পরীক্ষা করতে পারেন ।

ওল্ড সমাধান (historicalতিহাসিক কারণে সংরক্ষিত)

হ্যাঁ, এটি কেবলমাত্র CSS ব্যবহার করে খুব সম্ভব এবং খুব সহজ। আপনি যে কোণগুলিতে ইমেজগুলির সাথে লিঙ্কগুলি চান তা স্পষ্ট করে রাখতে হবে (যখনই আপনি কোনও একটিকে ঘুরে দেখেন তখন কেবল কোণগুলি দেখানোর জন্য আমি কোডের টুকরোটি শেষ করেছি)।

আপনার প্রথমে একটি র‍্যাপার দরকার। আমি এর ব্যাসটি সেট করেছিলাম 24em( width: 24em; height: 24em;এটি করে), আপনি যা চান সেটাকে সেট করতে পারেন। আপনি এটি দিন position: relative;।

তারপরে আপনি সেই লিখিত চিত্রগুলির সাথে আপনার লিঙ্কগুলি অনুভূমিকভাবে এবং উলম্বভাবে উভয় স্থানে রেখে দিন। আপনি সেটিংস স্থাপন করে position: absolute;এবং তারপরে top: 50%; left: 50%;এবং margin: -2em;( 2emচিত্রটির সাথে লিঙ্কের অর্ধ প্রস্থটি, যা আমি সেট করে রেখেছি 4em- আবার, আপনি এটি যা চান তাতে পরিবর্তন করতে পারেন তবে মার্জিনটি পরিবর্তন করতে ভুলবেন না যে ক্ষেত্রে)।

এর পরে আপনি কোণ যেটা আপনি ইমেজ সঙ্গে আপনার লিঙ্ক করতে চান সিদ্ধান্ত এবং আপনি একটি ক্লাস যোগ deg{desired_angle}(উদাহরণস্বরূপ deg0বা deg45বা যাই হোক না কেন)। তারপরে এই জাতীয় প্রতিটি শ্রেণীর জন্য আপনি এই জাতীয় শৃঙ্খলাবদ্ধ সিএসএস রূপান্তরগুলি প্রয়োগ করুন:

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

যেখানে আপনি প্রতিস্থাপন {desired_angle}সঙ্গে 0, 45, ইত্যাদি ...

প্রথম ঘোরানো রূপান্তরটি বস্তু এবং তার অক্ষগুলি ঘোরায়, অনুবাদ রূপান্তরটি আবর্তিত এক্স অক্ষের সাথে অবজেক্টটিকে অনুবাদ করে এবং দ্বিতীয় ঘোরানো ট্রান্সফর্মটি বস্তুটিকে অবস্থানে ফিরিয়ে দেয়।

এই পদ্ধতির সুবিধা হ'ল এটি নমনীয়। আপনি বর্তমান কাঠামোটি পরিবর্তন না করেই বিভিন্ন কোণে নতুন চিত্র যুক্ত করতে পারেন।

টুকিটাকি সংকেতলিপি

    .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ট্যাগ ব্যবহারের পরিবর্তে লিঙ্কগুলির জন্য পটভূমি চিত্র ব্যবহার করে এইচটিএমএলটিকে আরও সরল করতে পারেন ।

সম্পাদনা : আইই 8 এবং তার বেশি বয়সীদের ফ্যালব্যাকের সাথে উদাহরণ (আইই 8 এবং আই 7 তে পরীক্ষা করা)

Question 3

এখানে নিখুঁত অবস্থান ছাড়াই সহজ সমাধান:

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

Question 4

@ আনার দুর্দান্ত উত্তরটি তৈরি করে আমি এই গতিশীল সংস্করণটি তৈরি করেছি যা আপনাকে ডিওএম থেকে উপাদানগুলি যুক্ত করতে এবং অপসারণ করতে এবং উপাদানগুলির মধ্যে আনুপাতিক ব্যবধান বজায় রাখতে দেয় - আমার ফিডলটি দেখুন: 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>

স্নিপেট প্রসারিত করুন

Question 5

সিএসএসের সাহায্যে অন্য উপাদানগুলির আশেপাশে চেনাশোনায় ক্লিকযোগ্য আইটেমগুলিকে কোনও বৃত্তে রাখার উপায় নেই। আমি কীভাবে এটি করব তা হল একটি ধারক ব্যবহার করে position:relative;। এবং তারপরে position:absolute;এবং ব্যবহার করে topএবং leftএটির স্থানটিকে লক্ষ্যবস্তু করার জন্য সমস্ত উপাদান রাখুন ।

যদিও আপনি স্থাপন না jquery আপনার ট্যাগগুলিতে এটির জন্য jQuery / জাভাস্ক্রিপ্ট ব্যবহার করা ভাল।

প্রথম পদক্ষেপটি আপনার কেন্দ্রের চিত্রটি ব্যবহার করে ধারকটির কেন্দ্রে পুরোপুরি স্থাপন করা position:relative;।

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

এরপরে আপনি 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 
});

আমি এখানে যা করেছি তা কেন্দ্রের চিত্রের সাথে তুলনামূলকভাবে উপাদানগুলি রেখেছি। আশাকরি এটা সাহায্য করবে.

Question 6

আপনি অবশ্যই এটি খাঁটি সিএসএস দিয়ে করতে পারেন বা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। আমার পরামর্শ:

আপনি যদি ইতিমধ্যে জানেন যে চিত্রগুলির সংখ্যাটি কখনই পরিবর্তিত হবে না কেবল আপনার শৈলীর গণনা করুন এবং সরল সিএসএসের সাথে যান (পেশাদার: আরও ভাল পারফরম্যান্স, খুব নির্ভরযোগ্য)
যদি আপনার অ্যাপ্লিকেশনটিতে নম্বরটি গতিশীলভাবে পরিবর্তিত হতে পারে বা ভবিষ্যতে কেবল পরিবর্তিত হতে পারে কোনও জেএস সমাধানের সাথে যান (পেশাদাররা: আরও ভবিষ্যত-প্রমাণ)

আমার কাজ করার মতোই কাজ ছিল, তাই আমি একটি স্ক্রিপ্ট তৈরি করেছি এবং এটি উত্সাহিত করেছি যার প্রয়োজন পড়তে পারে তার পক্ষে এটি গিথুব এ এখানে সর্পডে খুললাম । এটি কেবল কিছু কনফিগারেশন মান গ্রহণ করে এবং আপনার প্রয়োজনীয় সিএসএস কোডটি সহজেই আউটপুট করে।

আপনি যদি জেএস সমাধানের জন্য যেতে চান তবে এখানে একটি সাধারণ পয়েন্টার যা আপনার পক্ষে কার্যকর হতে পারে। এই এইচটিএমএলকে একটি সূচনা পয়েন্ট হিসাবে ব্যবহার করা#box কনটেইনার এবং.dot মাঝখানে চিত্র / ডিভ আপনি আপনার অন্যান্য সমস্ত চিত্র চান:

এইচটিএমএল শুরু হচ্ছে:

<div id="box">
  <div class="dot"></div>
  <img src="my-img.jpg">
  <!-- all the other images you need-->
</div>

সিএসএস শুরু:

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

আপনি এখানে একটি সরাসরি উদাহরণ দেখতে পারেন

Question 7

@ আনা প্রস্তাবিত সমাধানটি ব্যবহার করে:

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

আমি নীচের জেএসফিডেল তৈরি করেছি যা সরল জাভাস্ক্রিপ্ট ব্যবহার করে চেনাশোনাগুলিকে গতিশীল রাখে (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>

স্নিপেট প্রসারিত করুন

Question 8

এখানে উদাহরণগুলি থেকে প্রতিক্রিয়াতে তৈরি করা একটি সংস্করণ এখানে।

কোডস্যান্ডবক্স উদাহরণ

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

Question 9

আপনি এটি এটি করতে পারেন: মিতাল

পজিশনিং আপত্তি করবেন না, এটি একটি দ্রুত উদাহরণ