javascript 打字效果的文字特效
更新時(shí)間：2011年01月19日 19:05:21 作者：
文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁(yè)的時(shí)候也經(jīng)常能看到這種效果。本節(jié)給出了一個(gè)打字效果的文字特效，文字一個(gè)一個(gè)地打印在頁(yè)面上。
本節(jié)代碼主要使用了 onMousedown 事件和 event.button 屬性，主要功能和用法如下。
• setTimeout 方法，在執(zhí)行時(shí)是在載入后延遲指定時(shí)間后，去執(zhí)行一次表達(dá)式，僅執(zhí)行一次。
• charAt 方法返回一個(gè)字符值，該字符位于指定索引位置。字符串中的第一個(gè)字符的索引為0，第二個(gè)的索引為1，等等。超出有效范圍的索引值返回空字符串。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
運(yùn)行該程序后，頁(yè)面出現(xiàn)一個(gè)提示信息，然后逐個(gè)出現(xiàn)字符。如此逐個(gè)出現(xiàn)字符后，等待全部打印完畢即可停止打印。
源程序解讀
（1）程序首先建立了一個(gè)層，其 ID 為 ttl0，便于以后調(diào)用。這個(gè)層用來(lái)顯示打印的文字。
?。?）程序在<body>元素上添加 onLoad 事件，當(dāng)整個(gè)頁(yè)面載入完成以后，該事件被觸發(fā)，調(diào)用 init() 事件處理函數(shù)，對(duì)該事件進(jìn)行處理。
（3）在函數(shù) txtTyper() 中，使用 charAt 方法得到字符串中的某個(gè)字符。使用 if 條件語(yǔ)句判斷該字符是否滿足盡頭。滿足條件后打印在頁(yè)面上。
?。?）在 if 語(yǔ)句中，也可使用任意合法的 JavaScript 語(yǔ)句，完成更為復(fù)雜的操作。
• setTimeout 方法，在執(zhí)行時(shí)是在載入后延遲指定時(shí)間后，去執(zhí)行一次表達(dá)式，僅執(zhí)行一次。
• charAt 方法返回一個(gè)字符值，該字符位于指定索引位置。字符串中的第一個(gè)字符的索引為0，第二個(gè)的索引為1，等等。超出有效范圍的索引值返回空字符串。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
運(yùn)行該程序后，頁(yè)面出現(xiàn)一個(gè)提示信息，然后逐個(gè)出現(xiàn)字符。如此逐個(gè)出現(xiàn)字符后，等待全部打印完畢即可停止打印。
源程序解讀
（1）程序首先建立了一個(gè)層，其 ID 為 ttl0，便于以后調(diào)用。這個(gè)層用來(lái)顯示打印的文字。
?。?）程序在<body>元素上添加 onLoad 事件，當(dāng)整個(gè)頁(yè)面載入完成以后，該事件被觸發(fā)，調(diào)用 init() 事件處理函數(shù)，對(duì)該事件進(jìn)行處理。
（3）在函數(shù) txtTyper() 中，使用 charAt 方法得到字符串中的某個(gè)字符。使用 if 條件語(yǔ)句判斷該字符是否滿足盡頭。滿足條件后打印在頁(yè)面上。
?。?）在 if 語(yǔ)句中，也可使用任意合法的 JavaScript 語(yǔ)句，完成更為復(fù)雜的操作。
相關(guān)文章
用js實(shí)現(xiàn)的上下文字滾動(dòng)效果代碼，需要的朋友可以參考下。2010-07-07
這是一個(gè)文字閃爍效果，不同的是它是由兩組文字組成 ，在閃爍的過(guò)程中可以重復(fù)切換，代碼中的speed指定字體閃爍的頻率，可以把引號(hào)內(nèi)的內(nèi)容換成你想要的文字，要記住一定要在body中加上onload語(yǔ)句，否則會(huì)無(wú)效哦。2009-11-11
窗體滾動(dòng)條出現(xiàn)在左側(cè)的實(shí)例代碼
讓瀏覽器窗口中的滾動(dòng)條打破常規(guī)出現(xiàn)在網(wǎng)頁(yè)的左側(cè)，記得在藏文的一些網(wǎng)站，經(jīng)?？吹骄W(wǎng)頁(yè)滾動(dòng)條居左，不知為何居左，可能是某些人群的使用習(xí)慣吧。2010-09-09
文字鏈接的熱點(diǎn)提示效果，一本書(shū)上的小提示例子，鼠標(biāo)停在紅色的鏈接文字上就會(huì)有一個(gè)小小的提示窗口顯示出來(lái)，有意思吧，支持鏈接哦。2011-08-08
使用JavaScript讓網(wǎng)頁(yè)的title動(dòng)起來(lái)
使用webQQ有些時(shí)間了，webQQ每次收到信息，就會(huì)看到title提示那個(gè)網(wǎng)友或群來(lái)信息，發(fā)現(xiàn)挺有意思，其實(shí)這個(gè)很簡(jiǎn)單。2011-01-01
JavaScript點(diǎn)擊插入文字，在一段文字的任意處點(diǎn)擊，會(huì)將你時(shí)先準(zhǔn)備好的文字插入到一段文字中，可能大家不怎么用到，不過(guò)感覺(jué)很奧妙，希望高手改進(jìn)成自己想要的效果。2009-10-10
讓鏈接必須按先后順序點(diǎn)擊的JS代碼，用到廣告上面比較好，有不少的文字或圖片廣告有類似效果，點(diǎn)鏈接的時(shí)候需要按順序，請(qǐng)注意鏈接地址，寫在JS代碼里的是真正需要的地址。2009-10-10
一個(gè)實(shí)現(xiàn)字體大中小方法的JavaScript代碼
再發(fā)一個(gè)實(shí)現(xiàn)字體大中小方法的JavaScript代碼，這種效果估計(jì)大家在網(wǎng)上見(jiàn)到挺多了，點(diǎn)擊適時(shí)改變網(wǎng)頁(yè)上字體的大小，以適合不同人群的瀏覽體驗(yàn)，本代碼較簡(jiǎn)單，使用方便。2011-08-08
JavaScript文字漸隱漸現(xiàn)顯示，更專業(yè)的說(shuō)法叫淡入淡出，最開(kāi)始用于視頻蒙太奇制作及Flash動(dòng)畫上，現(xiàn)在用到文字上也不是什么稀罕事了.2009-10-10
CSS3實(shí)現(xiàn)3D文字動(dòng)畫效果
CSS3 3D文字動(dòng)畫，看到這個(gè)字眼都覺(jué)得震撼，順便兼用下另兩個(gè)屬性：transition 和 animation。由于使用CSS3技術(shù)，因此測(cè)試時(shí)請(qǐng)使用火狐或Chrome等瀏覽器，否則不能看到效果2012-12-12