写于 2016.07.23
项目地址: https://github.com/jrainlau/motto 体验地址: https://jrainlau.github.io/motto/ Codepen: Codepen http://codepen.io/jrainlau/pen/vKQKEA
最新更新: 1.0.1 版本加入了 "抖动特效", 类似信号被干扰的样子, 欢迎品尝~
七夕快到了, 我不会告诉你这是一个告白神器...... 写一封长长的告白信, 把 config 里面的时间设置得长一些, 然后默默地把它发给你的心上人......
介绍
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} 可选 默认值: {} 乱码转换完成后的回调函数.
来源: https://juejin.im/post/5c1a4ff1e51d45059b633420