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卸载全部事件的思路详解
Apr 03 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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详细彻底学习Smarty
2008/03/27 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php组合排序简单实现方法
2016/10/15 PHP
php 可变函数使用小结
2018/06/12 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
python 合并文件的具体实例
2013/08/08 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python pygame实现2048游戏
2018/11/20 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
重阳节标语大全
2014/10/07 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书