用 JS 和 PHP 实现的简单的实时网页弹幕(使用JavaScript制作弹幕效果方法)
文章目录
用 JS 和 PHP 实现的简单的实时网页弹幕
instant-web-page-bullet(实时网页弹幕)
用 JS 和 PHP 实现的简单的实时网页弹幕
项目文件结构
使用方法
- 准备一个 PHP 服务器
- 在服务器的某一个位置，存放 src 文件夹内的三个文件，确保在同一目录下
- 在 src/danmu.js 中配置文件路径以及其他自定义项
- 开启 PHP 服务器，即可通过 src/index.html 页面发射弹幕
- 在需要接收、显示弹幕的网页上，引用如下 JS 文件。第一个是jQuery，第二个是弹幕脚本。弹幕脚本地址按实际位置修改
<script src=\"cdn.chper.cn/jquery-3.3.1.min.js\"></script>
<script src=\"chper.cn/danmu/danmu.js\"></script>
推荐的组合
＋impress.js
网页幻灯片 + 弹幕与观众互动
效果图
由于 GIF 的原因，颜色有些失真
开源地址：
https://github.com/chenghaopeng/instant-web-page-bullet
更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。
使用JavaScript制作弹幕效果方法
今天小编为大家分享一个使用JavaScript制作弹幕效果方法。
具体步骤如下：
1、编写HTML代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什么吧？”以提示用户在此输入弹幕信息。
2、设置各标签的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 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 |
<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代码，添加按钮点击事件
|
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 |
<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> |
最终效果部分截图如下：
以上就是小编为大家分享的JavaScript制作弹幕效果方法，感兴趣朋友可以尝试一下。
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 用 JS 和 PHP 实现的简单的实时网页弹幕(使用JavaScript制作弹幕效果方法)
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 用 JS 和 PHP 实现的简单的实时网页弹幕(使用JavaScript制作弹幕效果方法)
