簡單的文字打印機 效果

很久沒寫過 juqey, 看招聘信息 里面都是 什么 精通jquey、 react、 vue 諸如此類。。。
精通離我很遠， 熟練也不敢說。 也就是簡簡單單的貌似掌握。
看見一個博客里的效果， 突然自己想實現。 簡簡單單 寫個 jquery 插件。

給jquery 增加 fadeText 方法
參數 options
options.time 時間 文字插入間隔
options.text 待插入的文字
options.fn // 為 fn 提供 三個 參數函數 (stopFadeText, goOn, end)
stopFadeText 停止文字漸進效果
goOn 恢復文字漸進效果
end 結束 文字漸進效果， 立即到漸進效果最后一幀。

$.fn.extend({fadeText (options) {var time = options.time || 200var text = options.text.toString()var fn = options.fn || function () {}// 當前字符串 下標var index = 0// 字符串 總長度var length = text.length// 記錄定時器 id 的var k = null// 記錄 this var that = thisconsole.log(fn)var fadeText = function () {index ++;k !== null && clearTimeout(k)console.log(text.substr(0, index))//裁切 text 從第一位開始 長度為 index 的字符串that.text(text.substr(0, index))console.log($(that))if (index > length - 1)returnk = setTimeout(fadeText, time)}var stopFadeText = function () {clearTimeout(k)k = null}var goOn = function () { if ( k !== null) {index --fadeText()} }var end = function () {clearTimeout(k)that.text(text.substr(0, length - 1))}fadeText()fn(stopFadeText, goOn, end)return this} })

demo測試地址

總結

以上是生活随笔為你收集整理的文字打印机 效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。