写于 2016.07.23
项目地址:github.com/jrainlau/mo… 体验地址:jrainlau.github.io/motto/ Codepen: Codepen
最新更新:1.0.1版本加入了“抖动特效”,类似信号被干扰的样子,欢迎品尝~
七夕快到了,我不会告诉你这是一个告白神器……写一封长长的告白信,把config
里面的时间设置得长一些,然后默默地把它发给你的心上人……
介绍
MottoJS
是一个只有4kb(.min文件只有2kb)的JS插件,绿色无依赖。通过MottoJS
可以用一个很酷炫的方式展示你的座右铭。
安装
npm
npm install motto
复制代码
or
git clone [email protected]:jrainlau/motto.git
复制代码
使用
编写一个html标签,比如<h1></h1>
或其他
<h1 class="motto"></h1>
复制代码
然后引入MottoJS
![](/qrcode.jpg)
<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}
可选
默认值: {}
乱码转换完成后的回调函数。
证书
MIT
感谢你的阅读。我是Jrain,欢迎关注我的专栏,将不定期分享自己的学习体验,开发心得,搬运墙外的干货。下次见啦!