每天一个jquery插件-做弹幕效果
做弹幕效果
大概实现一个弹幕效果，当然实际操作这样也可以这么想吧，可能……
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做弹幕效果</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
body,html{
width: 100%;
height: 100%;
}
#main{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#bg{
flex:1;
background-color: gray;
position: relative;
}
#srk{
flex-basis: 100px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
#anniu{
border: 1px solid white;
height: 50px;
width: 95%;
border-radius: 50px;
overflow: hidden;
display: flex;
}
#input{
flex: 1;
border:none;
outline: none;
background-color:transparent;
font-size: 24px;
text-indent: 24px;
}
#btn{
flex-basis: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
}
#btn:hover{
opacity: 0.9;
}
#btn:active{
opacity: 0.8;
}
.item{
font-size:20px;
height:20px;
display: flex;
align-items: center;
text-indent: 12px;
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="bg"></div>
<div id="srk">
<div id="anniu">
<input type="text" id="input" placeholder="输点什么" />
<div id="btn">发送</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var index = 0;
$("#btn").click(function(){
var str = $("#input").val();
if(str&&str!=""){
fasong(str);
$("#input").val("");
}
})
function fasong(str){
arr[index].push(str);
}
var arr=[
["阿西吧"]
,["asd","zxvb"]
,["123"]
,[]
,["135","阿斯达收到"]
,[]
,["","",""]
,[""]
,[]
,["","","",""]
,[]
,[""]
,[]
,[]//……
]
//按照时间顺序，播放存储数据里面的信息
setInterval(function(){
while(!arr[index+1]){
arr.push([]);
}
drawdm(index);
index++
},1000)
function drawdm(index){
var ars = arr[index];
ars.forEach(item=>{
drawitem(item)
})
}
function drawitem(item){
var t = sj(5,4)
console.log(t)
var $dom =$("<div class='item'>"+item+"</div>");
$dom.appendTo($("#bg"))
$dom.css({
"top":sj($("#bg").height(),1)+"px",
"color":"rgb("+sj(256,0)+","+sj(256,0)+","+sj(256,0)+")"
})
setTimeout(function(){
$dom.remove();
},t*1000)
$dom.stop().animate({
"right":"120%"
},t*1000)
console.log(item)
}
function sj(temp,span){
return Math.floor(Math.random()*temp)+span;
}
})
</script>
思路解释
- 界面随便弄的，大概实现思路如下
- 弹幕出现大几率是出现在视频播放中，所以肯定是有一个时间轴的，我们就按照这个时间轴事件轴规定一个刻度，每一个刻度都记录各自的弹幕信息，然后播放对应的弹幕效果
- 弹幕效果全部随机生成，反正就是一堆参数随机
- 我这里就是一个计时器模拟的效果，以每秒为一个刻度，然后对应数组存储存储的数据
- 然后我发送效果，我就直接给存入下一个刻度里面此次发送的信息里面就行了，当然一个时间轴应该在视频出来之后就规定好了，对应存储的格式也应该合理设置，像我这里就是播放当前刻度的弹幕，然后判断下一个刻度的弹幕有没有，没有就加个空数组，这样子在发送新弹幕的时候才能给存进去。
- 完事，碎觉