太陽系軌道html中心

在我的太陽系模型中，當您點擊「切換軌道」時，它會顯示所有熟悉的行星地球的軌道，但您注意到這個環沒有居中在行星的中間，只能在外面它，我會怎麼做，所以它會在中間？太陽系軌道html中心

function myFunction() { 
 
    for (var i = 0; i < 500; i++) { 
 
    var x = Math.random() * screen.width; 
 
    var y = Math.random() * screen.height; 
 
    var star = document.createElement('div'); 
 
    star.className = 'star'; 
 
    star.style.left = x + 'px'; 
 
    star.style.top = y + 'px'; 
 
    document.body.appendChild(star); 
 
    } 
 
}

html { 
 
    background-color: #000; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
} 
 
.star { 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 1px; 
 
    background: white; 
 
    z-index: -1; 
 
} 
 
.sun { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
    border-radius: 50%; 
 
    /*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/ 
 
} 
 
#button-change { 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
} 
 
.earth { 
 
    position: absolute; 
 
    height: 25px; 
 
    width: 25px; 
 
    border-radius: 50%; 
 
    box-shadow: green 0 0 25px; 
 
} 
 
.earth-orbit { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: -100px; 
 
    -webkit-animation: spin-right 15s linear infinite; 
 
} 
 
.earth-lines { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
} 
 
.moon { 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.moon-orbit { 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -12.5px; 
 
    margin-bottom: -37px; 
 
    border: 1px solid rgba(255, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 4s linear infinite; 
 
} 
 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Vanishing Act</title> 
 
    <link rel='stylesheet' type='text/css' href='stylesheet.css' /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script type='text/javascript' src='script.js'></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("button").click(function() { 
 
     $('.earth-orbit').toggleClass('earth-lines'); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body onload="myFunction()"> 
 
    <img class="sun" src="5.png"> 
 
    </div> 
 
    <div class="earth-orbit"> 
 
    <div class='moon-orbit'> 
 
     <img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" /> 
 
    </div> 
 

 
    <img class="earth" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=74422923" /> 
 
    </div> 
 
    <button id="button-change">Toggle Orbits</button> 
 
</body> 
 

 
</html>

來源

2014-12-07 user4191887

你把.earth-lines靜態上.earth-orbit，所以調整.earth和.moon保證金是一個合理的解決方案。

另一方面，讓我們開箱即用。如果我們把.earth-lines作爲一個獨立的div呢？就像這樣：

<div class="earth-lines"> 
</div> 

<div class="earth-orbit "> 
    <div class='moon-orbit'> 
     <img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" /> 
    </div> 
</div>

而對於.earth-lines的CSS是這樣的：

.earth-lines { 
    display: none; 
    border-width: 1px; 
    border-style: solid; 
    border-color: white; 
    border-radius: 50%; 
    position: absolute; 
    height: 226px; 
    width: 226px; 
    top: 50%; 
    left: 50%; 
    margin-left: -113px; 
    margin-top: -113px; 
}

的最後一件事是要調整的JavaScript：

<script> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $('.earth-lines').toggle(); 
     }); 
    }); 
</script>

在這種情況下，將被切換，並將看起來就像你想要的樣子。這裏是一個小提琴：http://jsfiddle.net/x3ybjd0f/1/

P.S.奇妙的想法和實施，我喜歡它;）

UPDATE

如何修復太陽。

在你的代碼有<img class="sun" src="5.png">

根據您的評論，鏈接的圖片是http://toms-storage.tk/5.png

因此，對於這個正確的代碼將<img class="sun" src="http://toms-storage.tk/5.png">

來源

2014-12-07 02:36:13

謝謝xD但是隨着我的OCD行事起來，你能幫助我在地球中心獲得線路並且軌道線路開始隱藏嗎？哦，你知道爲什麼太陽被這樣壓扁嗎？ – user4191887 2014-12-07 02:44:47

太陽沒有被看到，因爲一個適當的圖像的URL 5.png不存在代碼 – 2014-12-07 02:48:48

@ user4191887我已經更新了css代碼，以最初隱藏線和中心看起來像它的中間' .earth'。太陽不在那裏，因爲太陽的URL不正確 - 你可能在本地有文件。 – 2014-12-07 02:50:49

.earth { 
    margin-left: 20px; 
}

然而，這將引發月球離軌道。調整.moon-orbit類的margin-left將解決該問題。

來源

2014-12-07 02:11:47 user2570380

調整方式？ – user4191887 2014-12-07 02:21:53

在CSS

.moon-orbit{ 
    margin-bottom : -14px; 
}

來源

2014-12-07 02:15:14

然後月亮關閉 – user4191887 2014-12-07 02:23:31

這裏的變化：

.moon-orbit { 
    top: 50%; 
left: 50%; 
height: 50px; 
width: 50px; 
margin-left: 6px; 
margin-bottom: -37px; 
border: 1px solid rgba(255, 0, 0, 0.1); 
border-radius: 50%; 
    -webkit-animation: spin-right 4s linear infinite; 
} 

.earth { 
position: absolute; 
height: 25px; 
width: 25px; 
margin-left: 20px; 
border-radius: 50%; 
    box-shadow: green 0 0 25px; 
}

這裏是小提琴：http://jsfiddle.net/4ehg64ru/1/

來源

2014-12-07 02:42:01

太陽系軌道html中心

回答

相關問題