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用noConflict代替$的实现方法
Apr 12 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery插件实现轮播图效果
Oct 19 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue实现微信分享功能
2018/11/28 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
python mysqldb连接数据库
2009/03/16 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
transform python环境快速配置方法
2018/09/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
智能钱包:Ekster
2019/11/21 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
服务标兵事迹材料
2014/05/04 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书