最近在搞视频的时候突然想加一个弹幕功能,但对我这样一个不会前端的人来说实在是太难了。 于是打开了万能的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>
整个功能很简单,可以搭配视频加数据库一起弄,这些功能就先不写了,有兴趣但不知道怎么做的,可以在下面评论,我们一起交流交流。