MottoJS,一个让你的“座右铭”更好玩的JS插件

栏目: JavaScript · 发布时间: 5年前

内容简介:写于 2016.07.23项目地址:最新更新:1.0.1版本加入了“抖动特效”,类似信号被干扰的样子,欢迎品尝~

写于 2016.07.23

项目地址: github.com/jrainlau/mo… 体验地址: jrainlau.github.io/motto/ Codepen:Codepen

最新更新:1.0.1版本加入了“抖动特效”,类似信号被干扰的样子,欢迎品尝~

七夕快到了,我不会告诉你这是一个告白神器……写一封长长的告白信,把 config 里面的时间设置得长一些,然后默默地把它发给你的心上人……

介绍

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

MottoJS,一个让你的“座右铭”更好玩的JS插件

安装

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 , CommonJSES2015 的方式引入。

然后使用 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} 可选 默认值: {} 乱码转换完成后的回调函数。


以上所述就是小编给大家介绍的《MottoJS,一个让你的“座右铭”更好玩的JS插件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解计算机系统(原书第3版)

深入理解计算机系统(原书第3版)

Randal E.Bryant、David O'Hallaron / 龚奕利、贺莲 / 机械工业出版社 / 2016-11 / 139.00元

和第2版相比,本版内容上*大的变化是,从以IA32和x86-64为基础转变为完全以x86-64为基础。主要更新如下: 基于x86-64,大量地重写代码,首次介绍对处理浮点数据的程序的机器级支持。 处理器体系结构修改为支持64位字和操作的设计。 引入更多的功能单元和更复杂的控制逻辑,使基于程序数据流表示的程序性能模型预测更加可靠。 扩充关于用GOT和PLT创建与位置无关代码的......一起来看看 《深入理解计算机系统(原书第3版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具