用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.