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 call和apply方法
Nov 24 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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与ASP
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
深入php处理整数函数的详解
2013/06/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
python实现石头剪刀布小游戏
2021/01/20 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
创业计划书的内容步骤和要领
2014/01/04 职场文书
尊师重教演讲稿
2014/09/04 职场文书
运动会广播稿100字
2014/09/14 职场文书
六年级小学生评语
2014/12/26 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript