现在很多线上视频都有文字弹幕的效果,这里简单介绍一下如何实现。
***核心思路是:***当点击发送弹幕后,就动态创建一个新的span,加到存放视频的div里面。span需要定位在div的右侧,具体位置可以随机或者指定一个范围,然后添加动画让span移动到div的左侧。
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 1000px;
margin: 50px auto;
}
.box .video {
width: 1000px;
height: 600px;
background: skyblue;
position: relative;
overflow: hidden;
}
.box .content {
background: #333;
height: 30px;
padding: 10px;
}
.box .content input {
float: right;
border: none;
outline: none;
padding: 0 15px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="video"></div>
<div class="content">
<input type="button" value="发射">
<input type="text">
</div>
</div>
</body>
</html>
开始添加动画
<script src="./jquery-1.12.4.min.js"></script>
<script>
// 随机生成颜色模块
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
// 给按钮添加点击事件
$(":button").click(function () {
// 准备生成的span的随机位置
var randomTop = Math.random() * $(".video").height();
$("<span></span>").text($(":text").val()).css({
position: "absolute",
top: randomTop,
right: -60,
color: randomColor(),
display: "block",
whiteSpace: "nowrap" // 强制一行显示,这个是必备的,不然文字跑到左边的时候回自动换行
}).appendTo($(".video")).animate({
right: $(".video").width()
}, 2000,function(){
// span的动画完成后及时清除掉
$(this).remove();
});
// 动画完成后将输入框的内容清空
$(":text").val("");
});
// 按下enter键发送
$(":text").keydown(function(e){
// 我们键盘的enter键是13
if(e.keyCode == 13){
$(":button").trigger("click");
}
});
</script>
文字弹幕的效果实现起来比较简单,需要注意的一点是,要让span的文字强制一行显示,这样才不会出现跑到盒子左边的时候文字自动换行的现象。