Я хотел бы создать круг (без анимации), который окружен другими кругами, например:
но я хотел бы создать приложение phonegap, поэтому я не хочу увеличивать размер файла до большого.
Кто-нибудь знает плагин/метод или любое другое решение?
Я искал в Интернете, но методы, которые я нашел, увеличивают размер моих файлов слишком большими.
Никто не обратился к аспекту javascript этого вопроса. Ниже приведена полная (хотя и быстрая и грязная) веб-страница, которая будет рисовать 6 идеально расположенных кругов вокруг центра родительского круга с использованием html, css3 и javascript; он использует чистый javascript, поэтому нет необходимости ссылаться на библиотеку jquery. Вы должны уметь видеть, как вы можете легко извлекать методы из кода для управления количеством окружений спутников, их расстоянием от центра родительского, родительского и спутникового радиусов, смещением спутника и т.д.:
<!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>
Чтобы создать круг, используйте border-radius: 50%. Затем просто поместите 6 круговых divs с position: absolute вокруг большего круга.
Пример такого: 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>
С помощью css вы можете попробовать что-то подобное. но использовать тег окружности HTML5 даст вам лучший результат.
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;
}
Добавление радиуса границы: от 50% до <div>, имеющего равную с и высоту, а затем поместить на него фоновый цвет, сделает круг из CSS (легкая нагрузка).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
Затем вы можете полностью расположить круг непосредственно в середине экрана, используя трюк абсолютной и отрицательной маржи.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Создайте класс, чтобы ухаживать за стилем для меньших кругов.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Затем добавьте идентификаторы (или любой другой способ их идентификации), чтобы расположить относительно по сравнению с большим кругом.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
Как кто-то сказал в комментариях, вы должны установить border-radius:50%, а затем, позиционируя абсолютно. Я сделал фиктивный jsfiddle для иллюстрации ссылка:
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;
}