字幕字体滚动插件——scroxt.js
README
scroxt.js Overview
scroxt.js是一个字体滚动的插件库,包括视频弹幕滚动,直播弹幕、直播弹幕强制模式、单行水平左右滚动、文本垂直滚动上下,用于简单快捷生成滚动字体。性能优秀,通过CPU加速,缓存字体元素,帧运动,达到最流畅的效果。兼容Chrome、Firefox、Opera、IE9及IE9以上浏览器。
Installation
npm install --save scroxt
更新
2017.11.08 视频弹幕增加播放,暂停,重播,快进,快退接口。详细查看视频弹幕
Getting Started
你能很方便的使用插件用于字体滚动,scroxt是对一个对象,滚动方式不同对应不同的类名,像水平滚动的类名是Horizontal作为scroxt的属性,使用的时候只要new scroxt.Horizontal来生成滚动字体。这里有详细的例子
一、水平滚动
new scroxt.Horizontal({
target: ".my-ele",
data: ['第一条','第2条','第3条'],
speed: -5
});
参数:
- target:水平滚动字体的容器css选择器
- data:字体数组
- speed: 滚动速度,单位帧移动的距离= speed * 0.1。speed的大小范围为 1-10
二、垂直滚动
new scroxt.Vertical({
target: ".my-ele",
data: ['第一条','第2条','第3条','第4条','第5条'],
speed: 5
});
参数:
- target:垂直滚动字体的容器css选择器
- data:字体数组
- speed: 滚动速度,speed的大小范围为 1-10。单位帧移动的距离= speed * 0.1。
三、视频弹幕
...
<div class="scroll-box-barrage">
<div class="scroxt-video-barrage">
<video id="my-video" preload="auto" width="640" height="auto">
<source src="http://14.215.100.242/v.cctv.com/flash/mp4video6/TMS/2011/01/05/cf752b1c12ce452b3040cab2f90bc265_h264818000nero_aac32-1.mp4" type='video/mp4'>
</video>
</div>
<div class="play">播放</div>
<div class="pause">暂停</div>
<div class="fast-forward">快进</div>
</div>
<script type="text/javascript" src="./dist/js/scroxt.js"></script>
<script type="text/javascript">
var scroxtBarrage = new scroxt.Barrage({
video: "#my-video",
dataTime: [{
data:"第一条弹幕",
time:1
},{
data:"第二条弹幕",
time:3
},{
data:"第三条弹幕",
time:2
}]
});
//播放
document.querySelector(".play").addEventListener("click",function(){
scroxtBarrage.play();
});
//暂停
document.querySelector(".pause").addEventListener("click",function(){
scroxtBarrage.stop();
});
//前进5s
document.querySelector(".fast-forward").addEventListener("click",function(){
scroxtBarrage.moveInterval(5);
});
</script>
...
scroxt.Barrage参数:
- video:视频标签的css选择器
- dataTime:弹幕数组,数组每一项由data和time字段组成,data是每条弹幕的内容,time是弹幕出现的时间/秒单位(video播放的时间);
scroxt.Barrage实例参数:
- play(): 开始播放
- stop(): 暂停播放
- restart(): 重新播放
- moveInterval(s): 快进s秒
- moveInterval(-s): 后退s秒
四-1、直播弹幕
...
<div class="scroll-box-barrage">
<div class="scroxt-video-barrage" style="width: 100%;">
<img class="video-bg" src="./img/bg.png" style="width: 100%;height: auto;display: block;vertical-align: middle;">
</div>
</div>
<script type="text/javascript" src="./dist/js/scroxt.js"></script>
<script type="text/javascript">
var scroxtLive = new scroxt.Live({
target: ".scroxt-video-barrage",
});
var i = 0;
setInterval(function(){
i++;
scroxtLive.addBarrage(i+"你好啊")
},100)
//用户自己发的弹幕
setTimeout(function(){
scroxtLive.addBarrage("一一一一一一一一一一",true)
},3000);
</script>
...
参数:
- target:目标容器元素
方法: - addBarrage:添加弹幕
四-2、直播弹幕兼容低版本的浏览器
火狐浏览器、IE9以下、浏览器操作元素滚动达到一定数量会出现严重掉帧的情况。所以在强制模式下,插件控制弹幕数量(屏幕最多65条弹幕)。但用户自己看到的弹幕不能缺失,当用户自己发弹幕时,通过给addBarrage方法传第二个参数true,只在用户自己电脑上出现弹幕,已达到欺骗的目的。api如下:
<script type="text/javascript">
var scroxtLive = new scroxt.Live({
target: ".scroxt-video-barrage",
strongLock:true
});
//用户自己发的弹幕
setTimeout(function(){
scroxtLive.addBarrage("一一一一一一一一一一",true)
},3000);
</script>
联系作者:qq-1737752975
字幕字体滚动插件——scroxt.js的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- 文字环绕和两栏自适应以及区域滚动插件iscroll.js
一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
随机推荐
- java多线程之Callable、Future和FutureTask
Java并发编程:Callable.Future和FutureTask 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一 ...
- python pip安装报错: ConnectTimeoutError
错误: 解决方案: 使用镜像:pip install xxxx -i https://pypi.douban.com/simple 如:pip3 install --upgrade tensorf ...
- 生产环境mysql数据库主从恢复从数据库
故障:系统硬盘损坏,完全重装 故障机器:172.16.100.32 恢复根据的主机器:172.16.100.31 1. 重装完成后,把master主库vs/program目录拷贝过来,然后把数据库的d ...
- 统计单词出现的最多次数(Trie树)
A Time Limit: 60ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 给出n(1<= n && n <= 2*10^6) ...
- fdisk与parted分区
我所接触的linux分区分为两种,一种是使用fdisk分区,另外一种是parted分区.前者是针对MBR模式分区的,后者是针对GPT模式分区的 fdisk分区: fdisk -l ---->查看 ...
- ios开发UI篇--UIStepper
概述 UIStepper用于增加或减少值的控件. 属性和方法 初始化方法 UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMak ...
- OC 知识:彻底理解 iOS 内存管理(MRC、ARC)
1. 什么是内存管理 程序在运行的过程中通常通过以下行为,来增加程序的的内存占用 创建一个OC对象 定义一个变量 调用一个函数或者方法 而一个移动设备的内存是有限的,每个软件所能占用的内存也是有限的 ...
- html移动应用 input 标签 清除按钮功能如何实现(不触发键盘)
有个需求是:输入框有文本的时候就显示清除按钮,没有文本则隐藏清除按钮,点击清除按钮不能影响键盘弹出的状态. 网上有css实现自动显示和隐藏清除按钮的方案,但是考虑到兼容性,我们还是使用js来实现. c ...
- 查询mssql的死锁语句
都是从网上找的,只是记录一下,可能用到. 查询死锁,要在当前数据库下,否则tableName列得不到正确信息select request_session_id spid,OBJECT_NAME( ...
- JavaWeb基础—会话管理之Cookie
一.什么是会话 打开浏览器,浏览各种资源,点击各种超链接,直至关闭浏览器,整个过程称为会话 二.会话管理的两种技术 1.Cookie 基于客户端.在客户端记录信息来确认用户身份.以cookie的形式写 ...