javascript 打字效果的文字特效

2019-11-20 23:58:19

字體：大中小

來源：轉載

供稿：網友

本節(jié)代碼主要使用了 onMousedown 事件和 event.button 屬性，主要功能和用法如下。
　　• setTimeout 方法，在執(zhí)行時是在載入后延遲指定時間后，去執(zhí)行一次表達式，僅執(zhí)行一次。
　　• charAt 方法返回一個字符值，該字符位于指定索引位置。字符串中的第一個字符的索引為0，第二個的索引為1，等等。超出有效范圍的索引值返回空字符串。

<html> <head> <title>打字效果的文字特效</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="JavaScript"> var layers = document.layers; var style = document.all; var both = layers || style; var idme = 908601; if(layers) //如果不是ie瀏覽器 { layerRef = 'document.layers'; styleRef = ''; } if(style) //如果是ie瀏覽器 { layerRef = 'document.all'; styleRef = '.style'; } function writeOnText(obj, str) { //函數(shù)在頁面上打印字符串 if(layers) { with(document[obj]) { document.open(); document.write(str); //write方法打印字符串 document.close(); } } if(style) eval(obj+'.innerHTML = str'); //使用innerHTML屬性顯示字符串 } var dispStr = new Array("武林網-m.survivalescaperooms.com"); //字符串數(shù)組 var overMe = 0; function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函數(shù):實現(xiàn)打字效果 { var tmp0 = tmp1 = '', skip = 100; if(both && idx <= str.length) { if(str.charAt(idx) == '<') { while(str.charAt(idx) != '>') idx++; idx++; } if(str.charAt(idx) == '&' && str.charAt(idx+1) != '') { while(str.charAt(idx) != ';') idx++; idx++; } tmp0 = str.slice(0, idx); tmp1 = str.charAt(idx++); if(overMe==0 && plysnd==1) { if(navigator.plugins[0]) { if(navigator.plugins["LiveAudio"][0].type == "audio/basic" && navigator.javaEnabled()) { document.embeds[0].stop(); setTimeout("document.embeds[0].play(false)", 100); } } else if(document.all) { ding.Stop(); setTimeout("ding.Run()", 100); } overMe = 1; } else { overMe = 0; } writeOnText(idObj, "<span id="iwvjtn8m0"    class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>"); //調用writeOnText函數(shù)將字符顯示在網頁上 setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay); } } function init() { txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0);　//調用txtTyper函數(shù)開始打字 } </script> </head> <body onLoad="init();"> <center> <h1>打字效果的文字特效</h1> <hr />  <div   id="iwvjtn8m0"   class="ttll" id="tt10"></div> </center> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

運行該程序后，頁面出現(xiàn)一個提示信息，然后逐個出現(xiàn)字符。如此逐個出現(xiàn)字符后，等待全部打印完畢即可停止打印。

源程序解讀
　　（1）程序首先建立了一個層，其 ID 為 ttl0，便于以后調用。這個層用來顯示打印的文字。
　　（2）程序在<body>元素上添加 onLoad 事件，當整個頁面載入完成以后，該事件被觸發(fā)，調用 init() 事件處理函數(shù)，對該事件進行處理。
　　（3）在函數(shù) txtTyper() 中，使用 charAt 方法得到字符串中的某個字符。使用 if 條件語句判斷該字符是否滿足盡頭。滿足條件后打印在頁面上。
　　（4）在 if 語句中，也可使用任意合法的 JavaScript 語句，完成更為復雜的操作。

上一篇：Jquery插件 easyUI屬性匯總

下一篇：jquery 圓形旋轉圖片滾動切換效果