Motto座右铭展示JS插件

联合创作 · 2023-09-22 04:35

介绍

MottoJS 是一个只有4kb(.min文件只有2kb)的JS插件,绿色无依赖。通过 MottoJS 可以用一个很酷炫的方式展示你的座右铭。

安装

npm

npm install motto

or

git clone git@github.com:jrainlau/motto.git

使用

编写一个html标签,比如 <h1></h1> 或其他

<h1 class="motto"></h1>

然后引入 MottoJS

<script src="motto.min.js"></script>

MottoJS 同时支持以 AMD , CommonJS 或 ES2015 的方式引入。

然后使用 new 操作符去生成一个MottoJS实例

var motto = new Motto(el, config)

参数

MottoJS 接受两个参数。

  • el {String / HTML element} 必须

    使用CSS选择器去选择一个用于展示你的座右铭的html元素。

  • config {Object} 必须

    一个带有5个属性的用于配置MottoJS的对象。

配置

基本的配置对象如下:

{    lyric: 'To be or not to be, that\'s a question.',
    showUpSpeed: 1000,
    flashSpeed: 100,
    flashTimeout: 1000,
    callback: function() { ... }}
  • lyric {String} 可选 默认值: ''

    你的座右铭内容。

  • showUpSpeed {Number} 可选 默认值: 0

    你的座右铭将会一个字一个字地出现,这个选项用于设置它们出现的间隔时间。

  • flashSpeed {Number} 可选 默认值: 0

    控制你的座右铭从乱码转化成有意义的句子的时间。

  • flashTimeout {Number} 可选 默认值: 0

    设置从座右铭完全输出到乱码转换之间的过渡时间。

  • callback {Function} 可选 默认值: {}

    乱码转换完成后的回调函数。

浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报