前言

最近在搞视频的时候突然想加一个弹幕功能，但对我这样一个不会前端的人来说实在是太难了。

于是打开了万能的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>

成果

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

html实现弹幕功能简单的小功能相关推荐

利用函数制作简单计算器小功能
输入任意数字进行任意计算并输出结果. 注意: 要注意数据类型之间的转换: return返回的是值!
c语言程序实现简单计算器功能,C语言实现简单计算器小项目
昨天刚安装上devc++,半夜想着练练C语言吧于是就看到实验楼有一个计算器的项目之前做过一次,这次写的主要是思路首先我们先从原理思考jia,实现简单的计算器就要具备加减乘除这些,看普通的计算器也 ...
简单实现小程序授权登录功能
本人给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助. 在我们平时工作.学习.生活中,微信小程序已成为我们密不可分的一部分, ...
开发一个简单错误记录功能小模块，能够记录出错的代码所在的文件名称和行号。
开发一个简单错误记录功能小模块,能够记录出错的代码所在的文件名称和行号. 处理:1.记录最多8条错误记录,对相同的错误记录(即文件名称和行号完全匹配)只记录一条,错误计数增加:(文件所在的目录不同,文 ...
【小程序源码】精美UI强大娱乐功能组合微信小程序源码下载,安装简单
这是一个多娱乐功能的小程序具体由以下功能组合: 在线音乐短视频去印外卖CPS(外卖平台优惠劵) 打车CPS(打车平台优惠劵) 头像功能(多分类头像,另外还支持姓氏头像制作) 图片加水印表情包功 ...
【JavaScript练习】用户输入任意两个数字的任意算数运算（简单的计算器小功能）并弹出运算后的结果。
[JavaScript练习]用户输入任意两个数字的任意算数运算(简单的计算器小功能)并弹出运算后的结果. <!DOCTYPE html> <html lang="en&qu ...
多功能工具箱微信小程序源码下载-操作简单实用流量主小程序
这是一款多功能工具箱小程序! 目前由N款小功能组合成比如: 图片拼接九宫格切图透明昵称文字表情等等上面说的只是一部分该款小程序无需服务器与域名使用微信开发者工具打开文件然后上传提交审核即 ...
超简单爬虫使用requests模块+有道云翻译,python实现翻译小功能
前言最近隔壁小张找到我 "老王,最近我在学英语,不想想再打开网页翻译了,太麻烦了一直要开着网页" "那你可以下载客户端吗,不是挺方便的嘛?" "老王 ...
利用Bmob快速实现安卓的简单登陆注册功能Bmobsdk3.6.9版本亲测可用（详细图文攻略附带处理小bug）
前言:从其他人的留言中我知道Bmob这个云数据库,之前我一直在自己写后台但是发现太慢了要学的东西超级多,脚手架也不知道为什么老是搭不上很蛋疼,然后春节又必须回来老家山区里面有些事情耽搁了后台也凉了,后 ...

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

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

前言

实现

实现思路

具体实现

成果

html实现弹幕功能简单的小功能相关推荐

最新文章

热门文章

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

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

前言

实现

实现思路

具体实现

成果

html实现弹幕功能 简单的小功能相关推荐

最新文章

热门文章

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

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

html实现弹幕功能简单的小功能相关推荐