您的位置：首页 > Web前端 > JavaScript

javascript实现视频弹幕效果（两个版本）

2019-12-02 18:11 1396 查看

本文实例为大家分享了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 视频弹幕
相关文章推荐
新的分享
章节导航