直播视频app源码，弹幕效果实现 jQuery

直播视频app源码，弹幕效果实现 jQuery功能的主要代码
主要实现功能：
点击弹幕按钮，开启弹幕编辑框
编辑好文本，点击发送按钮，文本就显示在弹幕框中
运用到的知识
Math.random( ) 随机获取
parseInt( ) 可解析字符串，并返回一个整数
append( ) 添加元素
animate({ },1000) 设置自定义动画
overflow: hidden 文本超出的部分隐藏
white-space:nowrap 文本不换行
代码如下：
html文件

```handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的弹幕效果</title>
<link rel="stylesheet" href="css/tanmu.css">
</head>
<body>
<!--弹幕框-->
<div class="box"></div>
<!--编辑内容-->
<div class="banner">
<div class="mark">
<input class="content" type="text">
<button class="btn">提交</button>
</div>
</div>
<!--开启弹幕-->
<div class="header">
<div class="angle">
<div class="radius"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/tanmu.js"></script>
</body>
</html>

```

css文件

```handlebars
html,body{
background:url(../images/beijing.jpg);
height:100%;
}
*{
margin:0px;
padding:0px;
}
.header{
position:absolute;
top:50px;
left:50px;
}
.header .angle{
position:relative;
width:60px;
height:30px;
background-color:rgba(41, 40, 40, 0.5);
border:1px solid #ddd;
border-radius:20px;;
}
.header .radius{
position:absolute;
top:1px;
left:1px;
width:25px;
height:25px;
background-color:#eee;
border:1px solid #ddd;
border-radius:50%;

}
/*弹幕编辑区*/
.banner{
display:none;
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:80px;
background-color:rgb(29, 27, 27);
}
.banner .mark{
width:580px;
height:35px;
margin:25px auto;
}
.banner .content{
float:left;
width:500px;
height:35px;
border-radius:10px 0px 0px 10px;
outline:none;
border:none;
text-align:center;
}
.banner .btn{
float:left;
width:80px;
height:35px;
border-radius:0px 10px 10px 0px;
border:none;
outline:none;
background:green;
}
/*文本效果*/
span{
position:absolute;
width:300px;
height:40px;
font-size:18px;
color:#000;
overflow:hidden;/*超出的部分隐藏*/
white-space: nowrap;/*文本不换行*/
}
```

js文件

```handlebars
$(".header .radius").click(function(){
$(this).animate({
marginLeft:28
},1000)
$(".banner").show(); //开启弹幕编辑框
})
$(".banner .btn").click(function(){
var colors=["red","pink","green","yellow","gray","blue","black"];
var randomY=parseInt(Math.random()*500);//随机获取span的高度（parseInt函数把字符串解析成数字，使用parseInt方法，可以返回一个整数）
var randomColor=parseInt(Math.random()*colors.length);//随机获取颜色
var value=$(".banner .content").val();//获取输入框的值
var span=$("<span>"+value+"</span>");//新建元素并赋予value值
$(".box").append(span);//添加元素
span.css("left","1530px").css("top",randomY).css("color",colors[randomColor]).animate({ //设置自定义动画
left:-500
},10000,function(){
$(this).remove();//清除弹幕
})
})
```