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 相关文章推荐
JavaScript脚本库编写的方法
Dec 09 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
去除html代码里面的script正则方法
May 19 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
package.json文件配置详解
Jun 15 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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学习之function的用法
2012/07/14 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
金融专业个人求职信范文
2013/11/28 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
运动会报道稿300字
2014/10/02 职场文书
党员自评材料范文
2014/12/17 职场文书
教师听课评语大全
2014/12/31 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
离婚协议书格式
2015/01/26 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
在python中读取和写入CSV文件详情
2022/06/28 Python