MottoJS，一個讓你的“座右銘”更好玩的JS外掛

Jrain發表於2018-12-19
JS

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

相關文章