大家对B站不陌生吧，特别是他的弹幕系统是很多网站都在模仿的，但是你知道他是怎么制作的吗？今天小猿圈web前端讲师就用jQuery实现弹幕评论效果，希望对你有所启发。
首先第一步：布局
CSS部分
<style>
*{padding: 0;margin: 0;
font-family: "微软雅黑";
font-size: 16px;
}
html,body{
width:100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#bottom {
width: 100%;
height: 100px;
background-color: #666;
position:fixed;
bottom:0px;
}
.content {
width: 430px;
height: 40px;
margin: 30px auto;
}
.title {
font-size: 22px;
color: #fff;
vertical-align: bottom;
display: inline;
}
#text {
width:300px;
height: 30px;
border: none;
border-radius: 5px;
}
#btn1 {
width: 60px;
height: 30px;
border: none;
margin-left: 2px;
background-color: red;
color: #fff;
}
span {
position: absolute;
font-size: 30px;
line-height: 30px;
white-space: nowrap;
}
</style>
下面是HTML部分
<div id="box" class="box">
<div id="bottom">
<div class="content">
<p class="title">吐槽：</p><input type="text" id="text"><button id="btn1">发射</button>
</div>
</div>
</div>
注意span别忘了加定位，否则无法做动画
jQuery代码实现
代码看起来很简单主要有随机颜色、随机位置的弹幕效果。新建span设置出现的X坐标和Y坐标，动画的效果和持续时间。以及发送完弹幕之后，输入框清空和给输入框绑定事件，按回车键也能发送弹幕。
需要注意的是弹幕动画的回调函数，动画执行结束后，一定要让这个span自我删除。
以上就是小猿圈web前端讲师对于jQuery实现弹幕评论效果的简单介绍，相信你也看会了很多吧，那就赶快行动去练习一下吧，记住学习前端不仅需要看文档看视频，还要的就是多多的练习前端自学交流群：820024416，这样才能记的牢固，视频可以到小猿圈去观看的，里面有最全最新的视频。