jQuery写一个简单的弹幕墙

概述

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

详细

代码下载：http://www.demodashi.com/demo/10371.html

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

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

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

一、准备工作

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

2、掌握html、css、js基础

二、实现思路

1、文件结构

bullet-screen.js:插件主js

bullet_screen.css:样式文件

index.html:运行入口文件

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

2、页面布局

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

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);