usage

引入

npm

npm i roll_text

const Roll = require('roll_text');
// or
import Roll from 'roll_text';

cdn

<script src="https://cdn.jsdelivr.net/npm/roll_text@0.0.6/lib/cdn-main.js"></script>

使用

const options = {
  container: '#box', // 必填，选择器
  content: "hello it's a demo", // 选填，文字内容，container为后备内容
  width: 100, // 选填，容器宽度，默认100px
  speed: 1, // 选填，滚动速度 默认1 正常速度，2倍速、0.5倍速
}
const roller = new Roll(options)

roller.start() // 开始滚动
roller.stop() // 停止滚动
roller.reset() // 重置

// 若要改变

常见问题

为什么动态修改了字幕内容，但字幕没变化？

请使用options.content = 'new content'的形式修改。否则传入的为字符串，直接复制的是值，不是引用。

versions

0.0.1

问题：

使用了es6语法，并且没有使用声明任何插件。使用import Roll from 'roll_text' 引入时，报错了。

 error  in ./node_modules/roll_text/index.js

Module parse failed: Unexpected token (19:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class Roll {
>   options = {
|     container: "",
|     width: 100,

原因：webpack打包时无法识别es6语法。

已在0.0.2版本修复。

0.0.2

问题：

使用了es6，webpack编译失败。解决：babel转义
样式加载失败。路径问题。解决：样式不多，使用内联样式。
连续执行start，会叠加速度。解决：增加移动状态flag

已在0.0.3版本修复。

0.0.4

问题：

缺少依赖包

解决：修改依赖项。

已在0.0.5解决。但未验证。

解决：发现依赖项并不是必须的。可能是打包的问题。

临时方法：手动修改打包文件。

0.0.5

问题：

直接引入cdn报错。

原因：浏览器环境不支持export

解决：另存一个文件，去掉export

已在0.0.6版本解决。

本文使用 mdnice 排版

「roll_text 」滚动吧，字幕君