自己写了一个弹幕效果，可以随机颜色，随机位置，额外的效果没有细写，jquery实现的
<template>
<div class="box">
<div class="textBox"></div>
<input type="text" class="ipt" />
<button class="btn">发射弹幕</button>
<!-- <el-button @click="open"></el-button> -->
</div>
</template>
<script>
import $ from "jquery";
export default {
data() {
return {};
},
mounted() {
$(".btn").on("click", function() {
var top, right;
var text = $(".ipt").val() .trim();
// console.log(text);
var appendspan = $("<span class='childspan'>" + text + "</span>");
$(".textBox").append(appendspan);
// $(".childspan").animate();
top = Math.random() * ($(".textBox").height() - appendspan.height());
// console.log(top);
appendspan.css({ right: 0, top: top, color: getcolor() });
var lastspan = $(".textspan>span:last-child");
var boxwidth = $(".textBox").width() - appendspan.width();
// console.log(boxwidth);
appendspan.animate({ right: boxwidth }, 3000, function() {
$(this).remove();
});
$(".ipt").val("");
function getcolor() {
var color = "";
var colorArr = [ "1", "2", "3", "4", "5", "6","7", "8", "9", "A", "B", "C","D","E","F"];
for (var i = 0; i <= 5; i++) {
color += colorArr[Math.floor(Math.random() * 16)];
}
return "#" + color;
}
});
}
};
</script>
