jQuery弹幕插件-51rgb

原创
2015/03/13 14:57
阅读数 254

dreamweaver免费视频教程:http://www.51rgb.com/mproductzh.aspx?classid=31加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

jQuery弹幕插件-51rgb

 

51RGB小编Q群162542073整理了一个堆叠切换图片效果插件分享出来大家参考使用。

插件描述

在网页上实现弹幕功能,类似于Bilibili等视频弹幕网站上的弹幕功能。彩色弹幕、顶端底端弹幕、自定义弹幕速度、实时调整透明度等弹幕该具备的基本功能,都有提供。

 

 

 

代码下载地址:http://www.51rgb.com/nbbs/thread-1671-1-1.html

简介

本插件实现弹幕功能,就如某些视频网站上的弹幕功能一样,只不过国内大多数视频网站是用flash实现的,而本插件通过jQuery。 就如绝大多数视频网站的弹幕功能,私也实现了彩色弹幕,顶端弹幕及底端弹幕,也可以即时操控弹幕透明度。当然也可以在弹幕运行的过程中暂停和继续。

用法

不用多说,第一步要引入js文件,把jquery.danmu.js和jQuery一起引用。

插件中定义了弹幕对象,意指具体某一条弹幕及起信息,对象名字叫danmu,该对象有如下属性:

text——弹幕文本内容。 

color——弹幕颜色。 position——弹幕位置 0为滚动 1 为顶部 2为底部 

size——弹幕文字大小。 0为小字 1为大字

time——弹幕所出现的时间。 单位为分秒(及1/10秒,100毫秒)

isnew——当出现该属性时(属性值科委任意),会认为这是用户新发的弹幕,从而弹幕在显示的时候会有边框。 例如:

要显示边框的新弹幕:

另外,为提高效率,插件另外定义了一种名为danmuss的对象,意指所有弹幕的集合,这个对象在每个弹幕屏中是唯一的。插件在运行时会把每个danmu对象写入danmuss对象,然后在相应的时间把某条弹幕放映于屏幕。dammuss对象每个属性的名称为弹幕所出现的时间点(分秒),属性值为该时间点所出现的所有弹幕的danmu对象(没有time属性)所组成的数组。

例如:

要在屏幕中插入弹幕,首先需要划定一个区域,使用<div>。 

例如现在创建一个id=danmu的div作为弹幕将要飞过的区域 <div id="danmu"> </div> 

然后调用插件方法,传递配置属性。

("#danmu").danmu({

left: 0, //区域的左边边界位置,相对于父div 

top: 0 , //区域的上边边界位置,相对于父div 

height: 360, //区域的高度 width: 640, //区域的宽度 

zindex :100, //div的css样式zindex

speed:5000, //弹幕速度,飞过区域的毫秒数 

sumtime:900 , //弹幕运行总时间

danmuss:{}, //danmuss对象,运行时的弹幕内容 

default_font_color:"#FFFFFF", //弹幕默认字体颜色 

font_size_small:24, //小号弹幕的字体大小,注意此属性值只能是整数

font_size_big:28, //大号弹幕的字体大小 

opacity:"0.7", //弹幕默认透明度 

top_botton_danmu_time:4000 //顶端底端弹幕持续时间 } );

所有属性都不是必须指定,默认值就如上。

当不指定danmuss时,也可以在调用此方法后用

;逐一添加danmu对象。 

当然在弹幕运行的过程中,可以随时用

添加弹幕。 

做完以上准备后,可以使弹幕在该区域开始运行,调用

即可运行。

其他方法:

暂停弹幕:

暂停后继续:

停止弹幕:

即时增加弹幕:

使弹幕时间同步与视频的时间,可能需要和时间相关的方法,如下。

获取弹幕运行的当前时间(单位为分秒):

设置弹幕运行的当前时间(单位为分秒):

更改弹幕透明度:

是否处于暂停状态:

如果需要像视频网站那样使用户所发弹幕得以保存,需要使用到web后端及数据库技术。

Demo

推荐的方法

通过控制好弹幕div的left、top、height、width、zindex属性,可以让弹幕正好悬浮于html视频之上,就如Demo中的那样。

在用户发弹幕时,可以在前端生成两个danmu对象,一个是有isnew属性的,即时使用add_danmu方法添加弹幕。另一个是没有isnew属性的,使用ajax技术写入数据库。

 

代码压缩包下载地址:

http://www.51rgb.com/nbbs/thread-1680-1-1.html

 

只看文字怎么够,51小编给你准备了大量免费课程视频 0基础起步 打开即看不啰嗦

视频直达网址:http://www.51rgb.com/mproductzh.aspx?classid=31

站内还有PS AI 各种一线软件课程视频

 


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部