jQuery实现评论弹幕、弹幕漂浮、滚动代码

以下是使用jQuery实现评论弹幕、弹幕漂浮、滚动的代码示例：

弹幕漂浮：

<div id="dm_box" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;"></div>

function createDM(content) {
  var dm = $('<div class="dm"></div>');
  dm.text(content);
  dm.css({
    'position': 'absolute',
    'top': Math.floor(Math.random() * ($('#dm_box').height() - dm.height())),
    'right': '-200px',
    'color': '#fff',
    'font-size': '16px'
  });
  $('#dm_box').append(dm);
  dm.animate({
    'right': $('#dm_box').width()
  }, 10000, function () {
    $(this).remove();
  });
}

setInterval(function () {
  var content = '这是一条弹幕' + Math.floor(Math.random() * 100);
  createDM(content);
}, 1000);

弹幕滚动：

<div id="dm_box" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;"></div>

function createDM(content) {
  var dm = $('<div class="dm"></div>');
  dm.text(content);
  dm.css({
    'position': 'absolute',
    'top': Math.floor(Math.random() * ($('#dm_box').height() - dm.height())),
    'right': '-200px',
    'color': '#fff',
    'font-size': '16px'
  });
  $('#dm_box').append(dm);
  dm.animate({
    'right': $('#dm_box').width()
  }, 10000, function () {
    $(this).remove();
  });
}

setInterval(function () {
  var content = '这是一条弹幕' + Math.floor(Math.random() * 100);
  createDM(content);
}, 1000);

评论弹幕：

<div id="dm_box"></div>
<form id="comment_form">
  <input type="text" name="comment" placeholder="发表评论">
  <button type="submit">提交</button>
</form>

function createComment(content) {
  var comment = $('<div class="comment"></div>');
  comment.text(content);
  comment.css({
    'color': '#333',
    'font-size': '16px',
    'margin-bottom': '10px'
  });
  $('#dm_box').append(comment);
}

$('#comment_form').submit(function (event) {
  event.preventDefault();
  var content = $('input[name="comment"]').val();
  createComment(content);
  $('input[name="comment"]').val('');
});