javascript实现视频弹幕效果(两个版本)


Posted in Javascript onNovember 28, 2019

本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下

基础版本

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 .dm {
 width: 800px;
 height: 600px;
 background-color: blue;
 margin: 0 auto;
 }

 .box {
 height: 500px;
 background-color: #000;
 position: relative;
 overflow: hidden;
 }

 video {
 width: 100%;
 height: 100%;
 }

 .info {
 text-align: center;
 margin-top: 20px;
 }

 input[type=text] {
 width: 500px;
 height: 50px;
 }

 input[type=button] {
 height: 50px;
 width: 100px;

 }

 span {
 position: absolute;
 /* 文本强制不换行 */
 white-space: nowrap;
 font: bold 18px '微软雅黑';
 }
 </style>

</head>

<body>
 <div class="dm">
 <div class="box">
 <video src="m.mp4" controls></video>
 </div>
 <div class="info">
 <input type="text" maxlength="30" id="txt">
 <input type="button" value="发射" id="emit">
 </div>
 </div>
 <script src="jquery-1.12.4.js"></script>
 <script>
 // 0. 用一个数组保存一组颜色值
 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue'];
 // 1. 给发射按钮注册点击事件
 $('#emit').click(function () {
 // 2. 获取文本框的内容
 var v = $('#txt').val();
 // 3. 创建span标签,并设置内容,设置样式,最后追加到类名为box的div中
 var $span = $('<span></span>');
 $span.text(v)
 .css({
  left: $('.box').width(),
  top: parseInt(Math.random() * $('.box').height()),
  color: colors[parseInt(Math.random() * colors.length)]
 }).appendTo('.box');
 // 4. 让当前的span产生动画 left 为-span的宽度
 $span.animate({
 left: -1 * $span.width()
 }, 6000, 'linear', function () {
 // 当动画结束后,删除该元素
 $span.remove();
 })
 });
 </script>

</body>

</html>

加强版本

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 .dm {
 width: 800px;
 height: 600px;
 background-color: blue;
 margin: 0 auto;
 }

 .box {
 height: 500px;
 background-color: #000;
 position: relative;
 overflow: hidden;
 }

 video {
 width: 100%;
 height: 100%;
 }

 .info {
 text-align: center;
 margin-top: 20px;
 }

 input[type=text] {
 width: 500px;
 height: 50px;
 }

 input[type=button] {
 height: 50px;
 width: 100px;

 }

 span {
 position: absolute;
 /* 文本强制不换行 */
 white-space: nowrap;
 font: bold 18px '微软雅黑';
 }
 </style>

</head>

<body>
 <div class="dm">
 <div class="box">
 <!-- controls 如果出现该属性,则向用户显示控件,比如播放按钮。 -->
 <video src="m.mp4" controls></video>
 </div>
 <div class="info">
 <input type="radio" value="" id="ban" name="1">精简</input>
 <input type="radio" value="" id="vip" name="1">VIP尊享</input>
 <input type="text" maxlength="30" id="txt">
 <input type="button" value="发射" id="emit">
 </div>
 </div>
 <script src="jquery-1.12.4.js"></script>
 <script>
 // 0. 用一个数组保存一组颜色值
 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue'];

 //定义一个变量,定义其他样式的
 b = 0
 $('#ban').click(function () {
 b = 1;
 });
 $('#vip').click(function () {
 b = 2;
 });




 // 1. 给发射按钮注册点击事件
 $('#emit').click(function () {
 // 2. 获取文本框的内容
 var v = $('#txt').val();
 // 3. 创建span标签,并设置内容,设置样式,最后追加到类名为box的div中
 var $span = $('<span></span>');

 //定义CSS样式,让它是一个数组形式表现
 css = [{
  "left": $('.box').width(),
  "top": parseInt(Math.random() * $('.box').height()),
  "color": colors[parseInt(Math.random() * colors.length)]
 },
 {
  "left": $('.box').width(),
  "top": parseInt(Math.random() * ($('.box').height() / 2)),
  "color": colors[parseInt(Math.random() * colors.length)]
 },
 {
  "left": $('.box').width(),
  "top": parseInt(Math.random() * $('.box').height()),
  "color": "yellow",
  "fontSize": 50,
  "fontFamily": "楷体"
 }
 ]
 //看看能不能打印出数组中的东西
 // console.log(abc[1])

 $span.text(v)
 .css(css[b])
 .appendTo('.box');

 // 4. 让当前的span产生动画 left 为-span的宽度

 //打印出文本长度
 // console.log(v.length)

 $span.animate({
  left: -1 * $span.width()
 }, (30 - v.length) * 333, 'linear',
 function () {
  // 当动画结束后,删除该元素
  $span.remove();
 })
 });
 </script>

</body>

</html>

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

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
javascript实现弹幕墙效果
Nov 28 #Javascript
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
微信小程序事件流原理解析
Nov 27 #Javascript
JS实现简单省市二级联动
Nov 27 #Javascript
Angular value与ngValue区别详解
Nov 27 #Javascript
原生js实现二级联动菜单
Nov 27 #Javascript
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Javascript缓存API
2016/06/14 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python正则表达式和元字符详解
2018/11/29 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Python发送邮件实现基础解析
2020/08/14 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
公司活动总结怎么写
2014/06/25 职场文书
前台岗位职责
2015/02/13 职场文书
红与黑读书笔记
2015/06/29 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
Python安装使用Scrapy框架
2022/04/12 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript