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实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
PHP实现递归的三种方法
2020/07/04 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Node.js事件驱动
2015/06/18 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
深入理解Promise.all
2018/08/08 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
网站客服岗位职责
2014/04/05 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
python中 .npy文件的读写操作实例
2022/04/14 Python