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启动应用程序的一个简单例子
May 11 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python3对接mysql数据库实例详解
2019/04/30 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python