私はこのように、他の円で囲まれている（任意のアニメーションなし）の円を作成したいと思います：css、javascriptで円の周りに円を作成するにはどうすればよいですか？
が、私はPhoneGapのアプリで構築したいと思いますので、私はしたくありませんファイルサイズを大きくする。
誰かがプラグイン/方法または他の解決策を知っていますか？
私はインターネットで検索しましたが、見つかった方法ではファイルサイズが大きすぎます。
誰もこの質問のjavascriptの側面を扱っていません。以下は、html、css3、およびjavascriptを使用して、親サークルの中心の周りに6つの完全に間隔をおいた円を描く完全な（すばやくで汚いですが）Webページです。純粋な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>
私はあなたのソリューションが本当に好きです。私はこのロジックのいくつかを[Moon Map]（https://github.com/mitch-seymour/moonmap）と呼ばれる軽量のjsライブラリに組み込みました。追加のアイデアがあれば、気軽に投稿してください！ – foxygen
あなたはそのようなことを試すことができます。 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;
}
サークルを作るために、border-radius: 50%を使用しています。次に、大きな円形の周りにの円形を配置し、position: absoluteを配置します。このようなの
<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>
皆さんありがとうございました:) –
誰かがコメントで言ったように、あなたは絶対に位置決めし、border-radius:50%を設定し、する必要があります。私は説明linkのためのダミー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;
}
：それに背景色を置くと同等と高さを持つ<div>から50パーセントは、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;
}
次に、大きな円と比較して相対的な位置を決めるためにID（または他の識別方法）を追加します。
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
おそらくしてみてくださいsvg？ 「」タグ？ –
bwoebi
円を作るには、 'border-radius：50％'を使います。その後、大きな円の周りに絶対配置で6つの円のdivを配置します。 – mash
@マッシュ - それは答えに値する。それを一つにすると、あなたは私の投票権を得るでしょう。 –