弹幕组件
1、核心代码
案例地址:
1、http://cf.qq.com/act/a20160608gun/
2、http://tgideas.qq.com/act/a20151218derekdemo/danmu/m_danmu.html
<!-- <scriptsrc="http://game.gtimg.cn/images/js/jquery/jquery-1.11.3.min.js"></script>
<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script> -->
//引入弹幕组件
<script src="http://game.gtimg.cn/images/js/su/danMu.beta.min.js"></script>
//实例化弹幕
var dm = new danMu({
device:'m',
stage: $(".danmustage"),
comments: danmuData,
danMuHtml: "<span>{comment}</span>",
colors: ["#fff","#00ccff","#ff0000","#00ff00","#fef500"],
flyTime:7000,
timeInterval:1200,
randomSort:true
});
2、参数/方法说明
参数/方法 | 名称 | 类型 | 默认值 | 描述 |
参数 | device | string | 'pc' | 设备是pc端还是移动端,'pc'代表pc端弹幕,'m'代表移动端弹幕 |
参数 | stage | object | $(".danmustage") | 弹幕舞台/容器 |
参数 | comments | array | [] | 弹幕初始数据 |
参数 | colors | array | ['#fff'] | 弹幕随机颜色数组 |
参数 | danMuHtml | string | '' | 普通弹幕html模板; {userId}代表弹幕所属用户唯一标识属性值; {comment}代表弹幕内容; 该html模板中支持出现多个{userId}和{comment} |
参数 | alwaysDanMuHtml | string | array | '' | 一直在舞台垂直居中位置出现的弹幕html模板(例如上面第二个demo的“TGideas弹幕来袭”);不设置或设置为''代表没有 |
参数 | danMuClassName | string | 'danmu' | 普通弹幕className |
参数 | myDanMuClassName | string | 'mydanmu' | 我发送的普通弹幕className |
参数 | alwaysDanMuClassName | string | 'alwaysdanmu' | 一直在舞台垂直居中位置出现的弹幕className |
参数 | mAnimation | string | 'transform' | 移动端弹幕动画类型; 'transform':代表采用css3的transform:translate3d(x,y,z);页面性能好,动画效果十分流畅; 'left':代表采用css3的transition:left;来过渡,性能差,动画效果有卡顿 |
参数 | hSpacing | number | 0.2 | 普通弹幕间最小高度间距是弹幕本身高度的几倍 |
参数 | flyTime | number | 10000 | 弹幕飞行时间,越大速度越慢 |
参数 | timeInterval | number | 3000 | 播放下一条普通弹幕的时间间隔 |
参数 | alwaysLoopTime | number | 10000 | 播放下一个舞台垂直居中弹幕的时间间隔 |
参数 | randomSort | boolean | false | 是否随机打乱初始弹幕数据 |
参数 | loop | boolean | true | 是否循环播放弹幕 |
参数 | autoplay | boolean | true | 是否自动播放弹幕 |
参数 | mouseoverpause | boolean | true | 是否鼠标上移悬停普通弹幕(只在pc端弹幕有效) |
参数 | awmouseoverpause | boolean | false | 是否鼠标上移悬停舞台垂直居中弹幕(只在pc端弹幕有效) |
参数 | danMuOverAlwaysLoop | boolean | true | 弹幕不循环播放的情况下,普通弹幕播放完毕,舞台垂直居中弹幕是否继续循环播放 |
参数 | cookieName | string | 'TGideasDanMu' | 静态数据弹幕下,用户发布的弹幕存入本地cookie的cookie名称;设为''代表不存入cookie,也不从cookie中读取用户以前发布的弹幕数据 |
参数 | cookieExp | number | 3650 | cookie过期时间(单位:天),仅在静态数据弹幕下,用户发布弹幕存于cookie时有效 |
参数 | localDanMuRandomInsert | boolean | true | 初始化弹幕时,存于本地cookie的弹幕数据是否随机插入到弹幕中 |
参数 | localDanMuNotRandomIndex | number | 3 | 表示从第几条开始播放本地cookie中的弹幕,仅在上一个参数设置为false时有效 |
参数 | localDanMuHasMyStyle | boolean | false | 本地cookie中的弹幕是否拥有'我发布的弹幕'样式,即mydanmu样式 |
参数 | appendRepeat | boolean | false | 静态弹幕追加弹幕数据,弹幕内容是否可重复 |
参数 | myDanMuPrefix | string | '我:' | 我发送弹幕时,显示在弹幕内容前面的前缀 |
参数 | uniqueTagName | string | '' | 每条弹幕数据用户的唯一标识属性名称。仅在动态弹幕下,且需要区分每条弹幕的用户(如显示用户id、展示用户头像等),才需设置 |
参数 | userId | string | number | '' | 代表当前用户的唯一标识属性值。仅在上一个参数有设置的情况下,才需设置 |
参数 | showMyStyle | boolean | false | 在动态弹幕下,除了用户当前发送的弹幕外的其他弹幕,如果用户标识也是当前用户,是否要显示'我的弹幕'样式,即mydanmu样式 |
参数 | submitSuccessCallback | boolean | false | 在动态弹幕下,该参数用于在发布弹幕时的成功回调方法里面,代表是否等到ajax提交弹幕数据到后台成功之后才置sendStatus为true |
参数 | aDanMuCreated | function | function(){} | 每一条弹幕创建完毕的回调方法,该方法在弹幕进入舞台之前执行的。例如:function(index, el, className){...} index:弹幕索引 el:弹幕dom className:弹幕className |
参数 | distanceToStage | number | 50 | 每个弹幕初始位置在弹幕舞台的右侧加上多少像素,50代表50px |
参数 | sendIfStopTips | string | '弹幕已经暂停或关闭,不能发布!' | 如果当前弹幕已经暂停或关闭的话,发布弹幕会失败,且会有这个提醒 |
参数 | sendIfFastTips | string | '您发布弹幕的速度太快了,请歇一会!' | 如果用户发送弹幕的速度太快的话,发布弹幕会失败,且会有这个提醒 |
参数 | direction | string | 'h' | 设置水平弹幕或垂直弹幕。 'h'代表水平弹幕; 'v'代表垂直弹幕 |
参数 | preventingXSS | boolean | true | 是否在用户使用send()方法发送弹幕时防御DomXSS,默认为true |
参数 | hSpacingFixed | boolean | false | 上下两条弹幕的高度间距是否固定。默认为false,代表高度间距是随机不固定的 |
方法 | send(data,callback) | - | - | 用户发送弹幕方法。 data:【必选】一条弹幕的内容,类型string callback(cval):【可选】发送弹幕成功的回调方法,类型function。其中参数cval为防御DomXSS后弹幕的最终文本 |
方法 | triggerSend(params,callback) | - | - | 前端开发同学模拟用户发送普通弹幕方法。 params:【必选】API调用的参数,类型object,含有3个属性,分别为data、sendid、insert; params.data:【必选】一条弹幕的内容,类型string(当uniqueTagName为空时)或object(当uniqueTagName不为空时,data格式为{'comment':'',uniqueTagName:''}) params.sendid:【可选】模拟用户发送普通弹幕时,每条弹幕添加的标识号(不同弹幕的标识号可以相同),在aDanMuCreated参数方法中会抛出每条弹幕的el,我们通过$(el).data('sendid')即可获得我们模拟弹幕设置的sendid,类型string或number params.insert:【可选】代表模拟用户发送的普通弹幕是否存入普通弹幕集合的数组中,用于loop为true的弹幕下次循环时播放显示,默认不存入数组,类型boolean callback():【可选】发送弹幕成功的回调方法,类型function 注:在send方法中,如果用户发送弹幕过快会给予提示;在triggerSend方法中则不会提示发送弹幕过快。 |
方法 | append(data,callback) | - | - | 追加弹幕方法。 data:【必选】弹幕数组,类型array callback():【可选】追加弹幕成功的回调方法,类型function |
方法 | pause(callback) | - | - | 暂停弹幕方法。 callback():【可选】暂停弹幕成功的回调方法,类型function |
方法 | play(callback) | - | - | 播放弹幕方法。 callback():【可选】播放弹幕成功的回调方法,类型function |