MottoJS，一個讓你的「座右銘」更好玩的JS插件

寫於 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 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，歡迎關注個人專欄，將不按期分享本身的學習體驗，開發心得，搬運牆外的乾貨。下次見啦！