javascript - 将多层图像排列成圆形？可能吗？

我正在寻找一些指导，如何实现已拍摄的效果。所以我正在学习JS和jQuery，我想建立一个基本上由圆组成的圆。这可能吗？任何信息都会有帮助的。我知道你可以把div/images排列成一个圆圈，但是多层呢？[本质上是一圈一圈？}

最佳答案

我写这篇文章的时候还没注意到你也想在中心画个圈，而不仅仅是在周边，但还是在这里：
JSBin demo
Javascript

var app = {
  count : 15,
  el : {
    self : document.getElementById('wrap'),
    width : document.getElementById('wrap').clientWidth,
    height: document.getElementById('wrap').clientHeight
  },
  circle : {
    radius : ( document.getElementById('wrap').clientWidth / 2 ) - 50,
    centerX : ( document.getElementById('wrap').clientWidth / 2 ),
    centerY : ( document.getElementById('wrap').clientHeight / 2 ),
  },
  methods : {
    circle : function(radius, steps, centerX, centerY) {
      var xValues = [centerX];
      var yValues = [centerY];
      for (var i = 0; i < steps; i++) {
          xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
          yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
      }

      return [xValues, yValues];
    }
  }
}


var coords = app.methods.circle(app.circle.radius, app.count, app.circle.centerX, app.circle.centerY);

for ( var i=0; i<app.count; i++ ) {
  var x = coords[0][i],
      y = coords[1][i];

  var rand = Math.floor((Math.random() * app.count) + 1);

  var div = document.createElement('div')
      div.style.left = (x-25) + 'px'
      div.style.top = (y-25) + 'px'
      div.style.backgroundImage = 'url("http://api.randomuser.me/portraits/med/men/'+rand+'.jpg")'

  app.el.self.appendChild(div)
}

关于javascript - 将多层图像排列成圆形？可能吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27137274/