-
-
Save hirokishirai/6d91fe07b609c02fa18a to your computer and use it in GitHub Desktop.
CSSとJavaScriptで円周上に等間隔に要素を配置する ref: http://qiita.com/hirokishirai/items/938c4341b0647766d8dc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .main-contents { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .circle-box { | |
| position: relative; | |
| margin: 0 auto; | |
| } | |
| div.item { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| -webkit-border-radius: 20px; | |
| -moz-border-radius: 20px; | |
| border-radius: 20px; | |
| background-color: #999; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.min.js'></script> | |
| </head> | |
| <body> | |
| <section class="main-contents"> | |
| <section class="circle-box"> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| <div class="item"></div> | |
| </section> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var item_num = $('div.item').length; | |
| var deg = 360.0/item_num; | |
| var red = (deg*Math.PI/180.0); | |
| var circle_r = $("div.item").width() * 2.5; | |
| $('div.item').each(function(i, elem) { | |
| var x = Math.cos(red * i) * circle_r + circle_r; | |
| var y = Math.sin(red * i) * circle_r + circle_r; | |
| $(elem).css('left', x); | |
| $(elem).css('top', y); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment