文字打印機(jī) 效果實(shí)現(xiàn)

孫淑建發(fā)布于2019-08-22 15:10 / 774人閱讀

摘要：簡單的文字打印機(jī)效果很久沒寫過看招聘信息里面都是什么精通諸如此類。。。也就是簡簡單單的貌似掌握?？匆娨粋€(gè)博客里的效果，突然自己想實(shí)現(xiàn)。當(dāng)前字符串下標(biāo)字符串總長度記錄定時(shí)器的記錄裁切從第一位開始長度為的字符串測試地址

簡單的文字打印機(jī) 效果

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

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

$.fn.extend({
    fadeText (options) {
        var time = options.time || 200
        var text = options.text.toString()
        var fn = options.fn || function () {}
       // 當(dāng)前字符串 下標(biāo)
        var index = 0
       // 字符串 總長度
        var length = text.length
        // 記錄定時(shí)器 id 的
        var k = null
        // 記錄 this    
        var that = this
        console.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)
                return
            k = 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測試地址

GPU云服務(wù)器云服務(wù)器文字效果 html文字倒影效果 html文字輸入效果 js 文字遠(yuǎn)近效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93239.html

相關(guān)文章

CSS14個(gè)實(shí)用技巧的精選和推薦

摘要：此文章主要為大家介紹了個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。設(shè)計(jì)的同時(shí)就可以把這個(gè)設(shè)成顯示來檢查它的效果。塊元素居中對(duì)齊如果想做個(gè)固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話，通常是這樣你會(huì)使用來圍上所有元素。此文章主要為大家介紹了CSS14個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。創(chuàng)業(yè)項(xiàng)目 2018優(yōu)選本頁技巧目錄： 1...

elisa.yang 2019-08-30 11:22 評(píng)論0 收藏0
php給圖片添加文字或圖片水印實(shí)現(xiàn)代碼(二種加水印方法)

摘要：有時(shí)上傳圖片時(shí)，需要給圖片添加水印，水印一般為文字或圖片水印，下面就來看看兩種添加方法?？截惒⒑喜D像的一部分更多庫函數(shù)用法，請查手冊相關(guān)文章實(shí)現(xiàn)圖片上傳時(shí)添加文字和圖片水印有時(shí)上傳圖片時(shí)，需要給圖片添加水印，水印一般為文字或圖片logo水印，下面就來看看兩種添加方法。一、文字水印文字水印就是在圖片上加上文字，主要使用gd庫的imagefttext方法，并且需要字體文件。效果圖如...

CoderStudy 2019-07-01 12:17 評(píng)論0 收藏0
科技不總是冷冰冰，智能便攜打印機(jī)讓文字更有溫度!——嵌入式功能實(shí)現(xiàn)篇

摘要：將信號(hào)拉高激活打印元件，接著使步進(jìn)電機(jī)轉(zhuǎn)動(dòng)兩步完成一點(diǎn)行的打印。步進(jìn)電機(jī)的步長為，一點(diǎn)行的寬度為，因此打印出一點(diǎn)行的數(shù)據(jù)需要步進(jìn)電機(jī)轉(zhuǎn)兩步。由于步進(jìn)電機(jī)和熱敏頭不能長時(shí)間連續(xù)工作，因此打印份數(shù)不宜設(shè)置過多，否則容易燒壞電機(jī)和熱敏頭。 ...

Mr_houzi 2021-09-10 10:50 評(píng)論0 收藏0
nodejs 終端打印進(jìn)度條

摘要：那么使用簡單的文本和符號(hào)，就夠自己拼湊出命令行的效果下面例子文件已上傳當(dāng)然，進(jìn)度條的效果可以根據(jù)需要自己設(shè)計(jì)啦，我這里只是給大家一個(gè)參考。 1. 場景導(dǎo)入當(dāng)我們對(duì)大量文件進(jìn)行批量處理的時(shí)候(例如：上傳/下載、保存、編譯等)，常常希望知道當(dāng)前進(jìn)展如何，或者失敗(成功)的任務(wù)有多少；當(dāng)我們的代碼或程序已經(jīng)發(fā)布，用戶在執(zhí)行安裝的過程中，一個(gè)合適的（終端/命令行）進(jìn)度條可以準(zhǔn)確反映安裝的步驟...

dack 2019-08-20 15:58 評(píng)論0 收藏0
兼顧pc和移動(dòng)端的textarea字?jǐn)?shù)監(jiān)控的實(shí)現(xiàn)方法

摘要：一需求闡述和常用的解決方案制作一個(gè)文本框限制最大字?jǐn)?shù)，實(shí)時(shí)監(jiān)聽當(dāng)前已經(jīng)輸入的字?jǐn)?shù)，并顯示出來。因此單純的監(jiān)聽事件顯示是不夠的。如果頁面里需要多個(gè)文本框都要限制字?jǐn)?shù)如何實(shí)現(xiàn)。一、需求闡述和常用的解決方案制作一個(gè)文本框限制最大字?jǐn)?shù)，實(shí)時(shí)監(jiān)聽當(dāng)前已經(jīng)輸入的字?jǐn)?shù)，并顯示出來。期初我實(shí)現(xiàn)這個(gè)功能的方法很簡單：給textarea控件添加onkeyup事件方法，在方法中將textarea值的長度...

laznrbfe 2019-08-20 17:15 評(píng)論0 收藏0