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

2019年8月31日 188次阅读 来源: jrainlau

项目地点：https://github.com/jrainlau/m…
体验地点：https://jrainlau.github.io/mo…
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, 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，迎接关注我的专栏，将不按期分享本身的进修体验，开辟心得，搬运墙外的干货。下次见啦！

    原文作者：jrainlau
    原文地址: https://segmentfault.com/a/1190000006053242
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞