寄せ書き.js

zuttomo.js

// 位置合わせは適当

var card = $("<div id='card' />");
var comments = $('#comments .comment-content .comment-body > p');

card
  .appendTo('body')
  .css({
    width: 700,
    height: 700,
    'text-align': 'center',
    top: 200,
    left: 200,
    position: 'absolute',
    background: '#fff',
    border: 'solid 2px #333',
    'box-shadow': '1px 3px 3px 1px #999, 0 0 2px rgba(0, 0, 0, .5) inset'
  });

$("<div>ズッ友だょ</div>")
  .appendTo(card)
  .css({
    height: 690,
    'line-height': '700px',
    'font-weight': 'bold',
    'font-size': 'x-large'
  });

var wrapper = $("<div id='card-wrapper' />").appendTo(card)

comments
  .find('img')
  .css({'max-width': '75%', 'max-heigth': '75%'});

$.each(comments, function(i, comment) {
  var deg = 360.0 / comments.length * i;
  var rad = deg * (Math.PI / 180.0);

  $(comment)
    .css({
      display: 'block',
      position: 'absolute',
      'z-index': 100,
      top: 260 - 200 * Math.cos(rad),
      left: 300 + 200 * Math.sin(rad),
      width: 100,
      'transform': 'rotate(' + deg + 'deg)'
    })
    .appendTo(wrapper);
});