javascript实现视频弹幕效果（两个版本）
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通的弹幕,语言用的是javascript,在chrome的控制台就可以执行这个脚本. 1.删除弹幕的流程分析 判断弹幕A是否为普通弹幕,是则选中. 点击删除弹幕的按钮,弹出二次确认框. 点击确定,成功删除. 2.删除弹幕相关的html代码,js代码2.1 选中 可通过判断class属性为"item-f
-
基于jQuery实现弹幕APP
今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo
-
基于JavaScript实现弹幕特效
本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&
-
jQuery实现弹幕效果
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;
-
JS实现的视频弹幕效果示例
本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼
-
简单实现JavaScript弹幕效果
不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&
-
JavaScript直播评论发弹幕切图功能点集合效果代码
一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
-
简单实现jQuery弹幕效果
在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素
-
javascript实现弹幕墙效果
刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=
-
jquery实现直播弹幕效果
本文实例为大家分享了jquery直播弹幕展示的具体代码,供大家参考,具体内容如下 理论知识: 实现效果主要涉及jq对节点的操作,以及动画函数的使用- 思路: 1.获取到评论文本框的值,对文本内容进行处理 2.动态创建一条弹幕,将创建的弹幕动态的添加到需要显示的页面,并同时创建一条新的评论消息,动态添加到评论列表 3.利用数组将每次添加的弹幕保存起来,使用定时器让所有的弹幕循环动态的展示出来 大体上的思路就是这样,下面直接贴代码? <!doctype html> <html> <