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

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

1. 评论弹幕

HTML代码：

<div id="comment-container">
  <div class="comment-item">我是评论1</div>
  <div class="comment-item">我是评论2</div>
  <div class="comment-item">我是评论3</div>
</div>

CSS样式：

#comment-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.comment-item {
  position: absolute;
  top: 0;
  left: 100%;
  white-space: nowrap;
}

JS代码：

$(function() {
  // 设置弹幕移动速度
  var speed = 5000;
  // 获取评论容器和评论项
  var $container = $('#comment-container');
  var $items = $container.find('.comment-item');
  // 遍历评论项
  $items.each(function() {
    // 获取评论项宽度
    var itemWidth = $(this).width();
    // 设置评论项的初始位置
    $(this).css('left', $container.width() + itemWidth);
    // 计算评论项移动到容器左侧的时间
    var time = ($(this).position().left + itemWidth) * speed / ($container.width() + itemWidth);
    // 设置评论项的动画效果
    $(this).animate({ left: -itemWidth }, time, 'linear');
  });
});

2. 弹幕漂浮

HTML代码：

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

CSS样式：

#danmu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

JS代码：

$(function() {
  // 设置弹幕移动速度
  var speed = 5000;
  // 获取弹幕容器
  var $container = $('#danmu-container');
  // 随机生成弹幕
  setInterval(function() {
    // 随机生成颜色和内容
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    var content = '我是弹幕';
    // 创建弹幕元素
    var $item = $('<div class="danmu-item"></div>').text(content);
    // 设置弹幕元素的样式
    $item.css({
      color: color,
      top: Math.floor(Math.random() * $container.height()),
      left: $container.width()
    });
    // 将弹幕元素添加到弹幕容器中
    $container.append($item);
    // 计算弹幕元素移动到容器左侧的时间
    var itemWidth = $item.width();
    var time = ($item.position().left + itemWidth) * speed / ($container.width() + itemWidth);
    // 设置弹幕元素的动画效果
    $item.animate({ left: -itemWidth }, time, 'linear', function() {
      // 移除弹幕元素
      $(this).remove();
    });
  }, 1000);
});

3. 滚动

HTML代码：

<div id="scroll-container">
  <ul>
    <li>我是滚动条目1</li>
    <li>我是滚动条目2</li>
    <li>我是滚动条目3</li>
  </ul>
</div>

CSS样式：

#scroll-container {
  position: relative;
  height: 100px;
  overflow: hidden;
}

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

#scroll-container ul li {
  margin: 5px 0;
}

JS代码：

$(function() {
  // 设置滚动速度
  var speed = 5000;
  // 获取滚动容器和滚动列表
  var $container = $('#scroll-container');
  var $list = $container.find('ul');
  // 计算滚动列表的高度
  var listHeight = $list.height();
  // 复制滚动列表元素
  $list.clone().appendTo($container);
  // 设置滚动列表的初始位置
  $list.css('top', 0);
  // 设置滚动列表的动画效果
  setInterval(function() {
    $list.animate({ top: -listHeight }, speed, 'linear', function() {
      $(this).css('top', $container.height());
    });
  }, speed);
});