先說(shuō)下思路:一些典型的嵌套文字的html容器標(biāo)簽可以是這樣:
1 <font>一行嵌套在font標(biāo)簽里的文字</font>
2 <p>一段嵌套在p標(biāo)記的文字</>
3 <div>一段嵌套在div標(biāo)記里的文字</div>
因此，我們首先要取得容器內(nèi)部?jī)?nèi)容。這可以通過(guò)給容口賦id，然后用jquery的$("#id").html()方法獲取到，并將獲取到的內(nèi)容賦與一字符串變量。接著設(shè)一方向向后，步長(zhǎng)為1的游標(biāo)，逐字判斷，若是字符"<”跳過(guò)，這樣做的目的是因?yàn)槟承┣短资褂脴?biāo)簽的情況存在，例如:
1 <font>嵌套使用<font color="red">標(biāo)簽</font>，這種情況下
2 應(yīng)該跳過(guò)內(nèi)層的標(biāo)簽，因?yàn)閮?nèi)層標(biāo)簽只是提供了一種表現(xiàn)形式</font>
在這種情況下應(yīng)該跳過(guò)內(nèi)層的標(biāo)簽，因?yàn)樗鼈冎皇翘峁┝艘环N表現(xiàn)形式，不屬于正文。所以此時(shí)游標(biāo)應(yīng)跳到下一個(gè)相應(yīng)的">"字符后一位的位置。最后我們使用substring()方法截取，對(duì)象是之前接收了標(biāo)簽內(nèi)部?jī)?nèi)容的字符串變量，截取內(nèi)容為起始位置到當(dāng)前游標(biāo)所在位置之間的一段文本。這樣就能使文本內(nèi)容逐漸變長(zhǎng)。
當(dāng)然了，因?yàn)橐氖谴蜃謾C(jī)效果，所以我們可以使用字符"_"來(lái)模擬一個(gè)光標(biāo)。用字符串"_"和""來(lái)模擬光標(biāo)的閃爍效果。這可以通過(guò)使用游標(biāo)與1按位與來(lái)實(shí)現(xiàn)，因?yàn)橛螛?biāo)向后游走的特性使得按位與的結(jié)果在0與1間變換，故而光標(biāo)的閃爍效果也出來(lái)了，然后將光標(biāo)附加在當(dāng)前顯示的文本內(nèi)容尾部即可。
又因?yàn)橐鹱峙袛嘧址愋停允褂胹etInterval()方法作為定時(shí)器即可，這樣做的好處還可以讓我們自定義一個(gè)打字機(jī)的速度。如下圖中typewriter方法的名為speed的參數(shù)所示。當(dāng)游標(biāo)移動(dòng)到內(nèi)部?jī)?nèi)容的結(jié)束處事，不要忘了調(diào)用clearInterval()消除定時(shí)器。
整個(gè)函數(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);用法很簡(jiǎn)單，舉例如下:
1 <p id="p1">一段嵌套在p標(biāo)記的文字</p>
2 <p id="p2">嵌套在p標(biāo)記里的<font>標(biāo)記</font></p>
在html頁(yè)面先引用jquery庫(kù)，再引入typewriter js文件。然后調(diào)用方法:
1 $("p1").typewriter(100);
2 $("p2").typewriter(200);即可。
值得注意的是:如果文本內(nèi)容包括字符"<"和">"，則顯示不出來(lái)，因?yàn)榉椒〞?huì)將它們當(dāng)作html標(biāo)簽而跳過(guò)。
請(qǐng)看效果：
提示：可修改后代碼再運(yùn)行!
來(lái)源：http://tudas.cnblogs.com/
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
