先說下思路:一些典型的嵌套文字的html容器標(biāo)簽可以是這樣:
1 <font>一行嵌套在font標(biāo)簽里的文字</font>
2 <p>一段嵌套在p標(biāo)記的文字</>
3 <div>一段嵌套在div標(biāo)記里的文字</div>
因此，我們首先要取得容器內(nèi)部內(nèi)容。這可以通過給容口賦id，然后用jquery的$("#id").html()方法獲取到，并將獲取到的內(nèi)容賦與一字符串變量。接著設(shè)一方向向后，步長為1的游標(biāo)，逐字判斷，若是字符"<”跳過，這樣做的目的是因為某些嵌套使用標(biāo)簽的情況存在，例如:
1 <font>嵌套使用<font color="red">標(biāo)簽</font>，這種情況下
2 應(yīng)該跳過內(nèi)層的標(biāo)簽，因為內(nèi)層標(biāo)簽只是提供了一種表現(xiàn)形式</font>
在這種情況下應(yīng)該跳過內(nèi)層的標(biāo)簽，因為它們只是提供了一種表現(xiàn)形式，不屬于正文。所以此時游標(biāo)應(yīng)跳到下一個相應(yīng)的">"字符后一位的位置。最后我們使用substring()方法截取，對象是之前接收了標(biāo)簽內(nèi)部內(nèi)容的字符串變量，截取內(nèi)容為起始位置到當(dāng)前游標(biāo)所在位置之間的一段文本。這樣就能使文本內(nèi)容逐漸變長。
當(dāng)然了，因為要的是打字機(jī)效果，所以我們可以使用字符"_"來模擬一個光標(biāo)。用字符串"_"和""來模擬光標(biāo)的閃爍效果。這可以通過使用游標(biāo)與1按位與來實現(xiàn)，因為游標(biāo)向后游走的特性使得按位與的結(jié)果在0與1間變換，故而光標(biāo)的閃爍效果也出來了，然后將光標(biāo)附加在當(dāng)前顯示的文本內(nèi)容尾部即可。
又因為要逐字判斷字符類型，所以使用setInterval()方法作為定時器即可，這樣做的好處還可以讓我們自定義一個打字機(jī)的速度。如下圖中typewriter方法的名為speed的參數(shù)所示。當(dāng)游標(biāo)移動到內(nèi)部內(nèi)容的結(jié)束處事，不要忘了調(diào)用clearInterval()消除定時器。
整個函數(shù)的代碼如下:
1 (function(a) {
2 a.fn.typewriter = function(speed) {
3 this.each(function() {
4 var d = a(this),
5 c = d.html(),
6 b = 0;
7 d.html("");
8 var e = setInterval(function() {
9 var f = c.substr(b, 1);
10 if (f == "<") {
11 b = c.indexOf(">", b) + 1
12 } else {
13 b++
14 }
15 d.html(c.substring(0, b) + (b & 1 ? "_": ""));
16 if (b >= c.length) {
17 clearInterval(e)
18 }
19 },
20 speed)
21 });
22 return this;
23 }
24 })(jQuery);用法很簡單，舉例如下:
1 <p id="p1">一段嵌套在p標(biāo)記的文字</p>
2 <p id="p2">嵌套在p標(biāo)記里的<font>標(biāo)記</font></p>
在html頁面先引用jquery庫，再引入typewriter js文件。然后調(diào)用方法:
1 $("p1").typewriter(100);
2 $("p2").typewriter(200);即可。
值得注意的是:如果文本內(nèi)容包括字符"<"和">"，則顯示不出來，因為方法會將它們當(dāng)作html標(biāo)簽而跳過。
請看效果：
提示：可修改后代碼再運(yùn)行!
來源：http://tudas.cnblogs.com/
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
