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

來源：https://juejin.im/post/5c1a4ff1e51d45059b633420

相關文章