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

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

1. 弹幕漂浮

HTML结构：

<div class="danmu-container"></div>

CSS样式：

.danmu-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  top: 0;
  font-size: 14px;
  white-space: nowrap;
}

jQuery代码：

function danmu(msg, speed) {
  var item = $('<div class="danmu-item">' + msg + '</div>');
  var top = Math.floor(Math.random() * ($('.danmu-container').height() - item.height()));
  item.css('top', top + 'px');
  $('.danmu-container').append(item);
  item.animate({left: '-' + item.width() + 'px'}, speed, function() {
    $(this).remove();
  });
}

// 调用示例
danmu('这是一条弹幕', 5000);

2. 滚动

HTML结构：

<div class="scroll-container">
  <ul>
    <li>滚动内容1</li>
    <li>滚动内容2</li>
    <li>滚动内容3</li>
  </ul>
</div>

CSS样式：

.scroll-container {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.scroll-container ul {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scroll-container ul li {
  display: inline-block;
  margin-right: 20px;
}

jQuery代码：

function scroll() {
  var container = $('.scroll-container');
  var ul = container.find('ul');
  var li = ul.find('li');
  var liWidth = li.outerWidth();
  var totalWidth = liWidth * li.length;
  var speed = 50;
  ul.width(totalWidth);
  container.hover(function() {
    ul.stop();
  }, function() {
    ul.animate({left: '-' + (totalWidth - container.width()) + 'px'}, (totalWidth - container.width()) / speed * 1000, 'linear', function() {
      ul.css('left', 0);
      scroll();
    });
  }).trigger('mouseleave');
}

// 调用示例
scroll();

3. 评论弹幕

HTML结构：

<div class="comment-container"></div>

CSS样式：

.comment-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.comment-item {
  position: absolute;
  top: 0;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}

jQuery代码：

function comment(msg) {
  var item = $('<div class="comment-item">' + msg + '</div>');
  var top = Math.floor(Math.random() * ($('.comment-container').height() - item.height()));
  item.css('top', top + 'px');
  $('.comment-container').append(item);
  item.animate({left: '-' + item.width() + 'px'}, 10000, function() {
    $(this).remove();
  });
}

// 调用示例
comment('这是一条评论');

以上是实现评论弹幕、弹幕漂浮、滚动的jQuery代码示例，可以根据需求进行修改和扩展。