博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
字幕字体滚动插件——scroxt.js
阅读量:7128 次
发布时间:2019-06-28

本文共 1503 字,大约阅读时间需要 5 分钟。

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。

三、视频弹幕

...
播放
暂停
快进
...复制代码

scroxt.Barrage参数:

  • video:视频标签的css选择器
  • dataTime:弹幕数组,数组每一项由data和time字段组成,data是每条弹幕的内容,time是弹幕出现的时间/秒单位(video播放的时间);

scroxt.Barrage实例参数:

  • play(): 开始播放
  • stop(): 暂停播放
  • restart(): 重新播放
  • moveInterval(s): 快进s秒
  • moveInterval(-s): 后退s秒

四-1、直播弹幕

...
...复制代码

参数:

  • target:目标容器元素
    方法:
  • addBarrage:添加弹幕

四-2、直播弹幕兼容低版本的浏览器

火狐浏览器、IE9以下、浏览器操作元素滚动达到一定数量会出现严重掉帧的情况。所以在强制模式下,插件控制弹幕数量(屏幕最多65条弹幕)。但用户自己看到的弹幕不能缺失,当用户自己发弹幕时,通过给addBarrage方法传第二个参数true,只在用户自己电脑上出现弹幕,已达到欺骗的目的。api如下:

复制代码

联系作者:qq-1737752975

转载于:https://juejin.im/post/5a012ed9518825295f5d5639

你可能感兴趣的文章
Android内存优化
查看>>
Linux文件管理
查看>>
JFinal常见问题汇总
查看>>
Ubuntu install vsftpd
查看>>
【BuglyIOS干货分享】iOS内存管理:从MRC到ARC实践
查看>>
【Bugly干货分享】Android性能优化典范之多线程篇
查看>>
【腾讯Bugly干货分享】QQ电话适配iOS10 Callkit框架
查看>>
python,时间加减,时间计算,时间格式化,时间提取汇总
查看>>
Python 数据结构>>7.7 列表解析
查看>>
基于MapReduce框架的PageRank算法实战(下)
查看>>
linux 管理工具
查看>>
页面被刷新两次异常
查看>>
java小知识点
查看>>
Linux 配置ip,远程,验证,运行,救援,相关
查看>>
Java(Android)线程池
查看>>
Spring MVC整合Velocity
查看>>
使用 GUID 值来作为数据库行标识讲解
查看>>
find命令详解
查看>>
linux字符终端中文显示输入工具zhcon
查看>>
PLANT:
查看>>