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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
js中!和!!的区别与用法
May 09 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
CodeIgniter视图使用注意事项
2016/01/20 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php时间函数用法分析
2016/05/28 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
Python实现多线程下载文件的代码实例
2014/06/01 Python
python实现查询苹果手机维修进度
2015/03/16 Python
在Python中使用元类的教程
2015/04/28 Python
python采集百度百科的方法
2015/06/05 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
ipython和python区别详解
2019/06/26 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
师范大学音乐表演专业求职信
2013/10/23 职场文书
校长就职演讲稿
2014/01/06 职场文书
党员个人自我评价
2015/03/03 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫