html实现弹幕功能 简单的小功能

html实现弹幕功能 简单的小功能

html实现弹幕功能 简单的小功能

前言实现实现思路具体实现

成果

前言

最近在搞视频的时候突然想加一个弹幕功能,但对我这样一个不会前端的人来说实在是太难了。 于是打开了万能的b站,您猜怎么着,就找到了相关的教学了。

实现

实现思路

这里主要是使用animate来自定义动画,其实就是实现一个滑块的动画就可以了。 这里先说一下animate的用法,示例如下

animate({

left: 0

}, 8000, 'linear', function({

$(this).remove();

});

各个参数,依次如下

第一个参数,其实就是设置动画对象最终的属性第二个参数,设置由最初变成最终结果的的时间第三个参数,设置动画的移动方式,这个参数是匀速第四个参数,是动画完成之后的回调函数

在了解之后,我们就有一个大致的思路了

把动画对象放在右边最终状态的对象放在左边,这样对象就可以从右边到左边移动了设置好动画完成时间和移动方式,这样就可以比较舒服的看到弹幕了

具体实现

Document

成果

整个功能很简单,可以搭配视频加数据库一起弄,这些功能就先不写了,有兴趣但不知道怎么做的,可以在下面评论,我们一起交流交流。