Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
    function drawCircle(selector, center, radius, angle, x, y) {
      var total = $(selector).length;
      var alpha = Math.PI * 2 / total;
      angle *= Math.PI / 180;
           
      $(selector).each(function(index) {
        var theta = alpha * index;
        var pointx  =  Math.floor(Math.cos( theta + angle) * radius);
        var pointy  = Math.floor(Math.sin( theta + angle) * radius );
    
        $(this).css('margin-left', pointx + x + 'px');
        $(this).css('margin-top', pointy + y + 'px');
    });
   }
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var angle = 90;
    drawCircle('.box', 50, 200, angle, 310, 220);
    $("#movebtn").on('click', function() {
      angle = angle + 5;
      drawCircle('.box', 50, 200, angle, 310, 220);
    });
  });
</script>
<body>
  <button id="movebtn" class="btn btn-info btn-large">Move around</button>
  <div class="container">
    <img src="http://placehold.it/150x150&text=1" class="box">
    <img src="http://placehold.it/150x150&text=2" class="box">
    <img src="http://placehold.it/150x150&text=3" class="box">
    <img src="http://placehold.it/150x150&text=4" class="box">
    <img src="http://placehold.it/150x150&text=5" class="box">
    <img src="http://placehold.it/150x150&text=6" class="box">
    <img src="http://placehold.it/150x150&text=7" class="box">
    <img src="http://placehold.it/150x150&text=8" class="box">
    <img src="http://placehold.it/150x150&text=9" class="box">
</div>
  
</body>
</html>
 
.container { 
  width:800px; margin:0 auto;
}
​
.box {    
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  background-position:0px 0px;
  background-color:#ccc;
  position:absolute;
  background-repeat:no-repeat;
  float:left;
  height:120px;
  margin:18px;
  position:absolute;
  width:120px;
  padding:5px;
}
​
.box:hover{
  border: #111;   
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alex.daquinopro
0viewers