मैं एक चक्र (किसी भी एनीमेशन के बिना) बनाने के लिए जो अन्य हलकों से घिरा हुआ है, इस तरह करना चाहते हैं:सीएसएस, जावास्क्रिप्ट के साथ एक सर्कल के चारों ओर सर्किल कैसे बनाएं?
लेकिन मैं एक phonegap अनुप्रयोग में निर्माण करने के लिए चाहते हैं, तो हो मैं नहीं चाहता फ़ाइल आकार को बड़ा करने के लिए।
किसी को प्लगइन/विधि या कोई अन्य समाधान पता है?
मैंने इंटरनेट पर खोज की, लेकिन मुझे मिली विधियों में मेरी फ़ाइलों का आकार बहुत बड़ा हो गया है।
कोई भी इस सवाल का जावास्क्रिप्ट पहलू को संबोधित किया। नीचे एक पूर्ण (यद्यपि त्वरित और गंदे) वेब पेज है जो एचटीएमएल, सीएसएस 3 और जावास्क्रिप्ट का उपयोग करते हुए माता-पिता सर्कल के केंद्र के चारों ओर 6 पूरी तरह से दूरी वाली मंडलियों को आकर्षित करेगा; यह शुद्ध जावास्क्रिप्ट का उपयोग करता है इसलिए किसी 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>
मुझे वास्तव में आपका समाधान पसंद आया। मैंने इस तर्क में से कुछ को प्रकाश-भार जेएस लाइब्रेरी [चंद्रमा मानचित्र] (https://github.com/mitch-seymour/moonmap) में शामिल किया है। यदि आपके पास कोई अतिरिक्त विचार है तो योगदान करने के लिए स्वतंत्र महसूस करें! – foxygen
सीएसएस का उपयोग करके आप ऐसा कुछ भी कोशिश कर सकते हैं। लेकिन एचटीएमएल 5 के सर्कल टैग का उपयोग आपको बेहतर परिणाम देगा।
एचटीएमएल
<!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>
सीएसएस
.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 के साथ बस 6 परिपत्र divs स्थिति रखें।
इस तरह का प्रकार: 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>
धन्यवाद दोस्तों :) –
किसी के रूप में टिप्पणी में कहा, आप तो border-radius:50% और स्थापित करने के लिए, पूरी तरह से स्थिति है। एक <div> के साथ एक समान है और ऊंचाई फिर उस पर एक पृष्ठभूमि रंग डाल सीएसएस से बाहर एक चक्र कर देगा कि 50%:
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;
}
बॉर्डर-त्रिज्या जोड़ना: उदाहरण देकर स्पष्ट करना के लिए link मैं एक डमी jsfiddle कर दिया है (कम भार होना)। पूर्ण और नकारात्मक मार्जिन चाल:
.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...
शायद कोशिश svg? ' 'टैग? –
bwoebi
एक सर्कल बनाने के लिए, 'सीमा-त्रिज्या: 50% 'का उपयोग करें। फिर बड़े सर्कल के चारों ओर पूर्ण स्थिति के साथ बस 6 परिपत्र divs स्थिति। – mash
@ मैश - यह एक उत्तर होने का हकदार है। इसे एक बनाओ और आपका वोट होगा। –