Chciałbym utworzyć krąg (bez jakiejkolwiek animacji), który jest otoczony przez innych środowisk, takich jak to:Jak tworzyć kręgi wokół koła za pomocą css, javascript?
ale chciałbym zbudować w app PhoneGap, więc nie chcę aby zwiększyć rozmiar pliku do dużego.
ktoś zna wtyczkę/metodę lub inne rozwiązanie?
Szukałem w Internecie, ale metody, które znalazłem, zwiększają rozmiar moich plików zbyt dużych.
Nikt skierowana javascript aspekt tej kwestii. Poniżej znajduje się pełna (aczkolwiek szybka i brudna) strona internetowa, która narysuje 6 idealnie rozmieszczonych kółek wokół centrum nadrzędnego koła za pomocą html, css3 i javascript; wykorzystuje czysty javascript, więc nie ma potrzeby odwoływania się do biblioteki jquery.Powinieneś być w stanie zobaczyć, jak można łatwo wyodrębnić metody z kodu kontrolować liczbę kół satelitarnych, ich odległość od centrum rodzica, rodzica i satelitarnych promieniach, offset satelitarna, etc:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
<style type="text/css">
#parentdiv
{
position: relative;
width: 150px;
height: 150px;
background-color: #ac5;
border-radius: 150px;
margin: 150px;
}
.div2
{
position: absolute;
width: 40px;
height: 40px;
background-color: #ac5;
border-radius: 100px;
}
</style>
<script type="text/javascript">
var div = 360/6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth/2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i)
{
var childdiv = document.createElement('div');
childdiv.className = 'div2';
childdiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI/180)) * radius;
var x = Math.cos((div * i) * (Math.PI/180)) * radius;
childdiv.style.top = (y + totalOffset).toString() + "px";
childdiv.style.left = (x + totalOffset).toString() + "px";
parentdiv.appendChild(childdiv);
}
</script>
</body>
</html>
Naprawdę polubiłem twoje rozwiązanie. Część tej logiki włączyłem do lekkiej biblioteki js zwanej [Moon Map] (https://github.com/mitch-seymour/moonmap). Zachęcamy do udziału, jeśli masz jakieś dodatkowe pomysły! – foxygen
Używając css możesz spróbować czegoś takiego. ale użyj tagu koła HTML5, który da lepszy wynik.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class=div2 style='top:12px; left:45px;'></div>
<div class=div2 style='top:4px; left:160px;'></div>
<div class=div2 style='top:94px; left:210px;'></div>
<div class=div1></div>
</body>
</html>
CSS
.div1{
margin:40px 10px 10px 50px;
position:relative;
width:150px;
height:150px;
background-color:#ac5;
border-radius:100px;
}
.div2{
position:absolute;
width:40px;
height:40px;
background-color:#ac5;
border-radius:100px;
}
Aby okrąg, użyj border-radius: 50%. Następnie po prostu umieść 6 okrągłych divs z position: absolute wokół większego okręgu.
Niby tak: http://jsfiddle.net/yxVkk/
<div id="big-circle" class="circle big">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
<style>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -25px;
top: -25px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
</style>
Dziękuję :) –
Jak ktoś powiedział w komentarzach, musisz ustawić border-radius:50% a następnie umieszczenie absolutnie. Zrobiłem obojętne jsfiddle dla zilustrowania link:
circle{
width : 50px;
height : 50px;
border-radius : 50%;
background: red;
position : absolute;
top : 50px;
left : 150px;
}
.small_circle_1{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : -25px;
left : 15px;
}
.small_circle_2{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : -25px;
}
.small_circle_3{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 55px;
left : 15px;
}
.small_circle_4{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : 55px;
}
Dodawanie border-radius: 50% do <div> że ma równe z wysokość i następnie oddanie background-color na nim uczyni okrąg z CSS (lekki ładunek).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
Możesz wtedy bezwzględnie ustawić okrąg bezpośrednio na środku ekranu, używając sztuczki position: absolute and negative margin.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Utwórz zajęcia, aby zadbać o stylizację mniejszych okręgów.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Następnie dodaj identyfikatory (lub inny sposób ich identyfikacji), aby ustawić pozycję względną w stosunku do dużego okręgu.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
może spróbować svg? '' 'tag? –
bwoebi
Aby utworzyć okrąg, użyj 'border-radius: 50%'. Następnie po prostu umieść 6 okrągłych elementów div z absolutnym pozycjonowaniem wokół większego okręgu. – mash
@Mash - To zasługuje na odpowiedź. Zrób to, a będziesz miał mój głos. –