用jQuery编写图片弹幕评论插件

0x01 前言

这是独角兽公社项目的一个小需求，本来呢，是打算用百度图说（效果如下）直接复制黏贴弄上去的，结果居然要申请后才能使用…

没办法，于是乎自己尝试实现一个图片评论弹幕的插件。

0x02 代码编写

我的思路是用一个wrapper将img包裹起来，然后弹幕元素position:absolute，显示在图片之上。

html

html的结构很简单

        <div class="img-wrapper">
            <div class="btn btn-tools">
                <span>❤</span>
                <span>发弹幕</span>
                <span class="btn-close">销毁</span>
            </div>
            <img data-src="http://7xqh5p.com1.z0.glb.clouddn.com/16-2-10/90889240.jpg" />
        </div>

css

js

0x03 注意要点

弹幕路径的计算

    //路径数量向上取整且减一
                    var pathCount = Math.ceil(this.textBorad.height() / options.height) - 1;

方法很简单：弹幕面板的高度 / 路径的高度 ，再向上取整减一即可

避免弹幕之间重叠

我设置的弹幕文字类默认是position:absolute;left:0。在初始化的时候，设置CSS 3D变换，translateX，向右偏移一个弹幕面板的宽度，刚刚好可以隐藏掉（父元素overflow:hidden）。

在路径添加弹幕文字的时候，有4种情况
1. 路径为空，没有文字。
2. 路径有文字正在执行动画，且是整个文字已经可以被看到的（right < 面板宽度）
3. 路径有文字正在执行动画，但是是还木有显示（left > 面板宽度）
4. 路径有文字正在执行动画，显示了一部分（left < 面板宽度 && right > 面板宽度）

其中 1,3可以归为一类处理，2归为一类处理。

0x04 不足之处

初始化暂时只能对应一个图片

0x05 插件使用方法

            var textFunc = $(".img-wrapper ").SlideText({
                speed: 1 //速度加成
            });
            comments = GenerateRandomText(10);
            textFunc.QueueComments(comments);
            $('#btn-send-danmu').click(function() {
                var tmparr = [];
                tmparr.push(new comment(0, $('#input-danmu').val()));
                textFunc.QueueComments(tmparr);
            });

0x06 成果

See the Pen JGBJOG by chenchen (@larry011) on CodePen.