怎样用JavaScript制作打字效果的文字特效
人气:2文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效，文字一个一个地打印在页面上。
本节代码主要使用了 onMousedown 事件和 event.button 属性，主要功能和用法如下。
步骤/方法
- 01
setTimeout 方法，在执行时是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。
- 02
charAt 方法返回一个字符值，该字符位于指定索引位置。字符串中的第一个字符的索引为0，第二个的索引为1，等等。超出有效范围的索引值返回空字符串。
- 03
<html><head><title>打字效果的文字特效</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><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) { //函数在页面上打印字符串if(layers) {with(document[obj]) {document.open();document.write(str); //write方法打印字符串document.close();}}if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串}var dispStr = new Array("javascript源码大全"); //字符串数组var overMe = 0;function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果{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 class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");//调用writeOnText函数将字符显示在网页上setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);}}function init(){txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0); //调用txtTyper函数开始打字}</script></head><body onLoad="init();"><center><h1>打字效果的文字特效</h1><hr /><br /><div class="ttll" id="tt10"></div></center></body></html>
- 04
运行该程序后，页面出现一个提示信息，然后逐个出现字符。如此逐个出现字符后，等待全部打印完毕即可停止打印，如下图所示。
特别提示
各平台浏览器下实现的显示的不同情况
加载全部内容