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之小练习代码
Oct 12 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
网站当前的在线人数
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP编码转换
2012/11/05 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
详解用node编写自己的cli工具
2017/05/23 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
网页美工求职信
2014/02/15 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
要账委托书范本
2014/09/15 职场文书