本文实例为大家分享了js实现弹幕墙效果的具体代码,供大家参考,具体内容如下
1.首先要考虑弹幕墙需要什么:一面墙,输入框,发射按钮,关闭和开启弹幕按钮,在此关闭和开启设置为同一个按钮;
2.其次弹幕上墙以后需要移动,从墙的最右边移动到最左边,当移动到最左边时,这条弹幕就要消失;
3.初步的想法应该就是当在输入框输入你要发送的内容,点击发送按钮,在墙上会新建一个div来包含这条弹幕内容,再给这个div相应的移动动画class;
4.弹幕颜色随机,单条弹幕之间有间隔;
取随机颜色这里用的是
1
|
"#" +(Math.random()*0x1000000<<0).toString(16)
|
首先,写出它的静态页面;
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--墙-->
< h1 >弹幕墙</ h1 >
< div id = "container" >
</ div >
<!--弹幕发送关闭-->
< div class = "s_c" >
< input id = "message" type = "text" placeholder = "说点什么" >
< div class = "btn" >
< button id = "sent" >发射弹幕</ button >
< button id = "clear" >关闭弹幕</ button >
</ div >
</ div >
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
#container{
/*width:700px;*/
height : 500px ;
margin : 50px 100px ;
border : solid 2px #7a2a1d ;
}
h 1 {
text-align : center ;
}
.s_c{
width : 500px ;
margin : 0 auto ;
}
#message{
width : 400px ;
height : 30px ;
margin : 0 auto ;
position : relative ;
left : 50px ;
}
.btn{
padding-top : 20px ;
height : 30px ;
margin-left : 150px ;
}
#sent,#clear{
width : 100px ;
}
|
js代码部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
var arr = []; //用于保存弹幕数据的数组;
var start = true ; //用于判断是否需要开启弹幕
$(document).ready( function (){
var showscreen = $( "#container" ); //弹幕墙的div
var showHeight = showscreen.height(); //弹幕墙div的高度
var showWidth = showscreen.width(); //弹幕墙div的宽度
//点击发射按钮事件
$( "#sent" ).click( function (){
var text = $( "#message" ).val(); //获取用户输入的待发送弹幕
$( "#message" ).val( "" ); //清空弹幕发送区
arr.push(text); //将数据存入实现定义好的用于保存弹幕数据的数组
var send_div=$( "<div>" +text+ "</div>" );
showscreen.append(send_div);
// var send_text=$("<div>+text+</div>");//新建div弹幕条
// var send_div = document.createElement("div");
// var inner = document.createTextNode(text);
// send_div.appendChild(inner);
// document.getElementById("container").appendChild(send_div)//把弹幕挂在墙上
move_text(send_div);
})
//按回车发送
$( "input" ).keydown( function (event){
if (event.keyCode == 13){
$( "#sent" ).trigger( "click" ); //trigger触发被选元素的指定事件类型,触发#send事件的click类型
}
})
if (start== false ){
start = true ;
$( "#clear" ).html( "关闭弹幕" );
run();
}
//关闭/开启弹幕按钮点击事件
$( "#clear" ).click( function (){
if (start == true ){
start = false ;
$( "#clear" ).html( "开启弹幕" );
showscreen.empty();
} else if (start == false ){
start = true ;
$( "#clear" ).html( "关闭弹幕" );
run()
}
});
var topMin = showscreen.offset().top;
var topMax = topMin+showHeight;
var top = topMin;
var move_text = function (obj){
obj.css({
display: "inline" ,
position: "absolute"
})
var begin = showscreen.width() - obj.width(); //一开始的起点
top+=50;
if (top > topMax-50){
top = topMin;
}
//console.log("showscreenWidth"+showscreen.width());
//console.log("objWidth",obj.width());
obj.css({
left:begin,
top:top,
color:getRandomColor()
});
var time = 20000 + 10000*Math.random();
obj.animate({
left: "-" +begin+ "px"
},time, function (){
obj.remove();
});
};
var getRandomColor = function (){
return '#' +( '00000' +(Math.random()*0xffffff <<0).toString(16)).substr(-6);
}
var run = function (){
if (start == true ){
if (arr.length > 0){
var n = Math.floor(Math.random()* arr.length + 1)-1;
var textObj = $( "<div>" +arr[n]+ "</div>" );
showscreen.append(textObj);
//console.log("loop:"+textObj.html());
move_text(textObj);
}
}
setTimeout(run,3000);
}
jQuery.fx.interval = 50;
run();
})
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/x_xxXmm/article/details/82143805