jQuery实现简单弹幕制作


Posted in jQuery onDecember 10, 2020

在现在的视频网站,我们在看视频的时候经常会有弹幕出现,那么怎么通过js实现这一效果呢,下面介绍一种简单的方法。

首先,搭好结构:

页面中先放一个视频,视频下部放一个input 标签和button按钮,代码如下:

<div class="box">
  <div class="top">
   <video src="./static/梦然-少年 .mp4" controls autoplay muted></audio>
  </div>
<div class="foot">
 <input type="text" name="" id="text">
 <input type="button" value="发送" id="btn">
</div>
</div>

再来写js

首先,我们需要包装三个函数,也就是发送到弹幕的随机颜色、随机高度和随机字体大小;代码如下:

<script>
  //随机获取字体颜色函数
 function getRandomColor(){
  var r = Math.floor(Math.random()*255);
  var g = Math.floor(Math.random()*255);
  var b = Math.floor(Math.random()*255);
  return 'rgb('+r+','+g+','+ b +')'
 }
//随机获取高度函数
 function getRandomHeight(){
  var height = $('.top').height()
  return Math.random()*height-30
 }
//随机获取字体大小函数
 function getRandomFontSize(){
  return Math.floor(Math.random()*60)
 }

现在我们需要获取用户输入的内容在将内容显示到页面中,并且移动,一直到页面外就消除,代码如下:

//事件注册
$('#btn').on('click',function(){
if($('#text').val() ==''){
 return
}
 $('<span></span>').text($('#text').val()).css({
  'position':'absolute',
  'width':200,
  'height':50,
  'color':getRandomColor(),
  'fontSize':getRandomFontSize(),
  'right':-200,
  'top':getRandomHeight()
 }).animate({right:1000},10000,'linear',function(){
  $(this).remove()
 }).appendTo($('.top'))
 $('#text').val('')
})

最后将键盘回车键也绑定事件,让用户输入内容后按下回车键和按发送按钮有同样的效果:

$('#text').keydown(function(event){
 if($('#text').val() ==''){
 return
} 
if(event.keyCode == 13){
 $('#btn').click()
}

})

</script>

最终效果如下

jQuery实现简单弹幕制作

那么,现在一个简单的弹幕就制作完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
基于jQuery拖拽事件的封装
Nov 29 #jQuery
jQuery实现动态操作table行
Nov 23 #jQuery
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
使用JS读秒使用示例
2013/09/21 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
浅析Python四种数据类型
2018/09/26 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
python全栈开发语法总结
2020/11/22 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
大学生演讲稿
2014/04/25 职场文书
社团个人总结范文
2015/03/05 职场文书
歼十出击观后感
2015/06/11 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL