以下是基于
jQuery实现评论
弹幕、
弹幕漂浮、
滚动的示例代码：
1. 评论
弹幕
HTML代码：
```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样式：
```css
#comment-container {
position: relative;
height: 300px;
overflow: hidden;
}
.comment-item {
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
}
```
JS代码：
```javascript
$(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代码：
```html
<div id="danmu-container"></div>
```
CSS样式：
```css
#danmu-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
```
JS代码：
```javascript
$(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代码：
```html
<div id="scroll-container">
<ul>
<li>我是
滚动条目1</li>
<li>我是
滚动条目2</li>
<li>我是
滚动条目3</li>
</ul>
</div>
```
CSS样式：
```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代码：
```javascript
$(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);
});
```
关注“码农那点事儿”公众号，在后台回复“200628”，即可获得。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
