jQuery写一个简单的弹幕墙

曾经终败给现在 2022-05-31 08:21 221阅读 0赞

近几年由于直播，弹幕流行起来，之前看到过用js制作弹幕墙的思路，觉得很有趣。自己就花了点时间把他做成了更灵活的jQuery插件，现在分享出来。

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10371.html][http_www.demodashi.com_demo_10371.html] ####

1、此插件逻辑简单，注释清晰，下载及用

2、如果读者能理解源码当然更好

3、读者可以根据实际需要修改样式或布局

#### 一、准备工作 ####

1、主流浏览器(非ie)，ie9+

2、掌握html、css、js基础

#### 二、实现思路 ####

1、文件结构

![01.png][]

bullet-screen.js:插件主js

bullet\_screen.css:样式文件

index.html:运行入口文件

jquery-1.9.1.min.js:jQuery文件（版本没有要求）

2、页面布局

一个弹幕墙容器接收弹幕  
一个文本框输入弹幕  
一个发送按钮 一个清屏按钮

![02.png][]

3、主要代码

html部分代码

<body>
        <div class="container">
    
        </div>
        <div class="menu-bar">
            <input type="text" placeholder="弹幕内容" id="bullet-text"/>
            <span class="btn send">发送弹幕</span>
            <span class="btn close">关闭弹幕</span>
        </div>
    </body>

css代码

.container{
        width: 1000px;
        margin: 100px auto;
        background: #e8e8e8;
        height: 500px;
        border-radius: 5px;
        border: 1px solid #ddd;
        position: relative;
        overflow: hidden;
    }
    .menu-bar{
        width: 1000px;
        margin: 0px auto;
        text-align: center;
    }
    .btn{
        padding: 5px 20px;
        display: inline-block;
        border-radius: 3px;
        border: 1px solid #e0e0e0;
        margin: 15px;
        background: #37a;
        color: #fff;
        cursor: pointer;
    }

js主要代码

(function($){
        $.bulletScreen={
            timers:[],    //定时数组
            /**
             * 添加弹幕
             * @param odiv 当前弹幕元素
             * @param container 弹幕墙容器
             */
            add:function(odiv,container){
                odiv.css({                          //定义弹幕元素的基本样式
                    position:'absolute',
                    fontSize:'20px',
                    display:'block',
                    whiteSpace:'nowrap'
                });
                var r = Math.floor(Math.random() * 254);
                var g = Math.floor(Math.random() * 254);
                var b = Math.floor(Math.random() * 254);
                odiv.css({                        //定义弹幕元素的随机样式（top位置,颜色）
                    color: "rgb(" + r + "," + g + "," + b + ")",
                    top: (Math.floor(Math.random() * container.height())-24) + "px",
                    width:odiv.width(),
                    right: 0
                });
                container.append(odiv);
                this.move(odiv,container);
            },
            /**
             * 暴露给外层调用的方法
             * @param val 弹幕内容
             * @param container 弹幕墙容器
             */
            send:function(val,container){
                var odiv = $("<div class='bullet'></div>");       //创建弹幕元素
                odiv.html(val);
                this.add(odiv,container);
            },
            /**
             * 定时改变弹幕的位置（right+1）,到达左侧时清除弹幕，清除定时任务
             * @param odiv 当前弹幕元素
             * @param container 弹幕墙容器
             */
            move:function(odiv,container){
                var i = 0;
                var timer = setInterval(function() {
                    odiv.css({
                        right: (i += 1) + "px"
                    });
                    if ((odiv.offset().left + odiv.width()) < container.offset().left) {
                        odiv.remove()
                        clearInterval(timer)
                    }
                }, 10);
                this.timers.push(timer);
            },
            /**
             * 清除弹幕墙上的所有弹幕
             * @param container 弹幕墙容器
             */
            clear:function(container){
                for (var i = 0; i < this.timers.length; i++) {  //遍历定时素组，清除所有定时任务
                    clearInterval(this.timers[i])
                }
                container.find('.bullet').remove();
            }
        }
    })(jQuery);

#### 三、运行效果 ####

![03.png][]

#### 四、兼容性 ####

主流浏览器(非ie)，ie9+

#### 五、其他补充 ####

1、在浏览器中运行index.html及可

2、涉及jQuery插件开发的知识

3、demo提供了主要思路，具体要根据实际做相应修改，有不足之处欢迎指正

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10371.html]: http://www.demodashi.com/demo/10371.html
[01.png]: /images/20220531/3258c3d1d858441b92413e435afca9b4.png
[02.png]: /images/20220531/228eb783976c41869ef215410b07b463.png
[03.png]: /images/20220531/0bc3c079287341fa8d8d42bfed55674e.png
[http_www.demodashi.com]: http://www.demodashi.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关用Jquery和Ajax写一个简单的分页条

一、如果是jsp页面的话，可以用EL表达式和JSTL标签制作一个分页条，没有什么难度。用EL表达式和JSTL标签实现的缺点就是无法实现异步效果，整个页面是重新刷新了一遍

「爱情、让人受尽委屈。」/ 2023年06月21日 07:17/ 0 赞/ 9 阅读

相关 Ajax面试题-jQuery写出一个简单的 Ajax 请求

写出一个简单的 Ajax 请求 $.ajax({ // 请求地址 url: 'user1.php', // 请求方式

- 日理万妓/ 2023年05月29日 05:08/ 0 赞/ 74 阅读

相关 js 书写一个简单弹窗

弹窗 html <div class="mark"></div> css .mark { position:

旧城等待，/ 2023年05月21日 07:23/ 0 赞/ 53 阅读

相关写一个简单的makefile

简单说明一下makefile的基本语法 target...: prerequisites... command ... 冒号前的文件

短命女/ 2022年06月06日 03:25/ 0 赞/ 291 阅读

相关 jQuery写一个简单的弹幕墙

近几年由于直播，弹幕流行起来，之前看到过用js制作弹幕墙的思路，觉得很有趣。自己就花了点时间把他做成了更灵活的jQuery插件，现在分享出来。详细代码下载：[ht

曾经终败给现在/ 2022年05月31日 08:21/ 0 赞/ 222 阅读

相关用jQuery写简单的计时器

只显示当前的时分秒，以下代码直接运行即可关键起作用的就是这个函数 setInterval()，第二个参数1000代码1000毫秒，也就是1秒，调用一下函数 f(),

墨蓝/ 2022年04月24日 01:04/ 0 赞/ 223 阅读

相关使用jQuery写一个简单的拖拽案例

> 这个案例主要运用到几个jQuery简单的函数嵌套在一起; > 相当好理解; > 当你在使用时一定要将jQuery的文件引用到该代码中 <script>

逃离我推掉我的手/ 2022年04月17日 06:25/ 0 赞/ 220 阅读

相关运用jQuery写一个超简单的点击轮播图

运用jQuery写一个超简单的点击轮播图一、css样式 > 这里应该用五张图片放在对应的位置 > img文件下分别是a.jpg、b.jpg、c.jpg、d.j

Myth丶恋晨/ 2022年04月16日 02:37/ 0 赞/ 227 阅读

相关实现一个简单的JQuery API

今天要模仿jQuery来实现两个API，他们的功能是： 1 为选中的标签添加某个 class 2 将选中的标签的value替换为某个text 首先，顺着这个

不念不忘少年蓝@/ 2022年02月24日 11:46/ 0 赞/ 303 阅读

相关 vue写一个公用弹出框

1.你可以在最外层的页面嵌入弹窗组件 ![1110732-20190220132613059-129050844.png][] 2.然后控制它出来的变量存在vuex里 !

﹏ヽ暗。殇╰゛Y/ 2021年12月22日 00:21/ 0 赞/ 448 阅读