前言
最近在搞视频的时候突然想加一个弹幕功能，但对我这样一个不会前端的人来说实在是太难了。
于是打开了万能的b站，您猜怎么着，就找到了相关的教学了。
实现
实现思路
这里主要是使用animate来自定义动画，其实就是实现一个滑块的动画就可以了。
这里先说一下animate的用法，示例如下
animate({
left: 0
}, 8000, 'linear', function({
$(this).remove();
});
各个参数，依次如下
- 第一个参数，其实就是设置动画对象最终的属性
- 第二个参数，设置由最初变成最终结果的的时间
- 第三个参数，设置动画的移动方式，这个参数是匀速
- 第四个参数，是动画完成之后的回调函数
在了解之后，我们就有一个大致的思路了
- 把动画对象放在右边
- 最终状态的对象放在左边，这样对象就可以从右边到左边移动了
- 设置好动画完成时间和移动方式，这样就可以比较舒服的看到弹幕了
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../assets/js/jquery-1.8.1.js"></script>
</head>
<body>
<div style="height: 800px;width: 800px;text-align: center;background-color: black;" id="main">
</div>
<script>
infos = ['说得对', '我人傻了', '这是一条弹幕', '前端太难了', '好烦']
setInterval(function() {
for (r in infos) {
//设置弹幕的样式和内容
info = $('<span></span>');
info.text(infos[r]);
info.attr("style", "margin-right:0px;margin-top:" + Math.random() * 35 + "%;position:absolute;color:white;");
//向弹幕显示区域添加弹幕
$('#main').append(info);
//设置动画
info.animate({
left: 0
}, 8000, 'linear', function() {
//动画完成后就删除
$(this).remove();
});
}
}, 3000);
</script>
</body>
</html>
成果
整个功能很简单，可以搭配视频加数据库一起弄，这些功能就先不写了，有兴趣但不知道怎么做的，可以在下面评论，我们一起交流交流。