A jquery plug-in every day-do barrage effect
Do barrage effect
Probably to achieve a barrage effect, of course, you can think about it like this in actual operation, maybe...
The effect is as follows
Code part
<!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>
Idea explanation
- The interface is casually made, and the idea of implementation is as follows
- The high probability of the barrage appears in the video playback, so there must be a time axis. We will specify a scale according to the time axis event axis, and each scale will record its respective barrage information, and then play the corresponding barrage. effect
- The barrage effects are all randomly generated, anyway, it’s a bunch of random parameters
- Here is the effect of a timer simulation, with a scale per second, and then store the stored data in the corresponding array
- Then I send the effect, and I just save it directly into the message sent this time in the next scale. Of course, a timeline should be specified after the video comes out, and the corresponding storage format should also be set reasonably, like me here It is to play the barrage of the current scale, and then determine whether there is a barrage of the next scale, and add an empty array if there is no barrage, so that it can be saved when a new barrage is sent.
- Finished, broken sleep