Products
GG网络技术分享 2025-03-18 16:13 4
大家对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部分
<body>
<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>
</body>
注意span别忘了加定位，否则无法做动画
jQuery代码实现
<script src=\"jquery-1.12.4.js\"></script>
<script>
$(function(){
var colors=[\"red\",\"green\",\"blue\",\"pink\",\"purple\",\"cyan\",\"hotpink\",\"#000\"]
$(\"#btn1\").click(function(){
var randomColors=parseInt(Math.random()*colors.length);
var randomY=Math.random()*400;
//console.log(randomY);
$(\"<span></span>\")
.text($(\"#text\").val())
.css(\"color\",colors[randomColors])
.css(\"left\",$(window).width())
.css(\"top\",randomY)
.animate({left:-500},10000,\"linear\",function(){
$(this).remove();
})
.appendTo(\"#box\");
$(\"#text\").val(\"\");
})
$(\"#text\").keyup(function(e) {
if (e.keyCode==13) {
$(\"#btn1\").click();
}
})
})
</script>
代码看起来很简单主要有随机颜色、随机位置的弹幕效果。新建span设置出现的X坐标和Y坐标，动画的效果和持续时间。以及发送完弹幕之后，输入框清空和给输入框绑定事件，按回车键也能发送弹幕。
需要注意的是弹幕动画的回调函数，动画执行结束后，一定要让这个span自我删除。
以上就是小猿圈web前端讲师对于jQuery实现弹幕评论效果的简单介绍，相信你也看会了很多吧，那就赶快行动去练习一下吧，记住学习前端不仅需要看文档看视频，还要的就是多多的练习，这样才能记的牢固，视频可以到小猿圈去观看的，里面有最全最新的视频。
js是怎么实现弹幕效果，下面让小编来介绍下。效果的具体步骤如下：
1、编写HTML代码：
创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什么吧？”以提示用户在此输入弹幕信息。
| <body> <div class=\"con\"> <div id=\"screen\"> <div class=\"dm_show\"> <!-- <div>text message</div> --> </div> </div> <div class=\"edit\"> <p> <input placeholder=\"说点什么吧？\" class=\"content\" type=\"text\" /> </p> <p> <input type=\"button\" class=\"send\" value=\"发送\" /> <input type=\"button\" class=\"clear\" value=\"清屏\" /> </p> </div> </div> </body> |
2、设置各标签的CSS样式：
| <style> .con { background-color: floralwhite; padding: 40px 80px 80px; } #screen { background-color: #fff; width: 100%; height: 380px; border: 1px solid rgb(229, 229, 229); font-size: 14px; } .content { border: 1px solid rgb(204, 204, 204); border-radius: 3px; width: 320px; height: 35px; font-size: 14px; margin-top: 30px; } .send { border: 1px solid rgb(230, 80, 30); color: rgb(230, 80, 0); border-radius: 3px; text-align: center; padding: 0; height: 35px; line-height: 35px; font-size: 14px; width: 159px; background-color: white; } .clear { border: 1px solid; color: darkgray; border-radius: 3px; text-align: center; padding: 0; height: 35px; line-height: 35px; font-size: 14px; width: 159px; background-color: white; } .edit { margin: 20px; text-align: center; } .text { position: absolute; } *{ margin: 0; padding: 0; } .dm_show{ margin: 30px; } </style> |
3、编写JavaScript代码，添加按钮点击事件
| <script type=\"text/javascript\" src=\"../jquery-easyui-1.3.5/jquery.min.js\"></script> <script> $(function() { //设置“发送”按钮点击事件，将弹幕体显示在弹幕墙上 $(\'.send\').click(function() { //获取文本输入框的内容 var val = $(\'.content\').val(); //将文本框的内容赋值给val后，将文本框的内容清除，以便用户下一次输入 $(\'.content\').val(\'\'); //将文本框内容用div包裹起来，便于后续处理 var $content = $(\'<div class=\"text\">\' + val + \'</div>\'); //获取弹幕墙对象 $screen = $(document.getElementById(\"screen\")); //设置弹幕体出现时的上边距，为任意值 var top = Math.random() * $screen.height()+40; //设置弹幕体的上边距和左边距 $content.css({ top: top + \"px\", left: 80 }); //将弹幕体添加到弹幕墙中 $(\'.dm_show\').append($content); //弹幕体从左端移动到最右侧，时间为8秒，然后直接删除该元素 $content.animate({ left: $screen.width()+80-$content.width() }, 8000, function() { $(this).remove(); }); }); //设置“清屏”点击事件，清除弹幕墙中的所有内容 $(\'.clear\').click(function() { $(\'.dm_show\').empty(); }); }); </script> |
以上就是js如何实现弹幕效果的详细内容，更多请关注网站其它相关文章！
Demand feedback
