javascript 打字效果的文字特效

ttx9n · 发表于 2011-1-19 19:05:21

文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效，文字一个一个地打印在页面上。本节代码主要使用了 onMousedown 事件和 event.button 属性，主要功能和用法如下。
　　• setTimeout 方法，在执行时是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。
　　• 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) { //函数在页面上打印字符串 
if(layers) { 
with(document[obj]) { 
document.open(); 
document.write(str); //write方法打印字符串 
document.close(); 
} 
} 
if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串 
} 
var dispStr = new Array("脚本之家-www.jb51.net"); //字符串数组 
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, "<font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font>"); 
//调用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 />

</center> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
运行该程序后，页面出现一个提示信息，然后逐个出现字符。如此逐个出现字符后，等待全部打印完毕即可停止打印。

源程序解读
　　（1）程序首先建立了一个层，其 ID 为 ttl0，便于以后调用。这个层用来显示打印的文字。
　　（2）程序在<body>元素上添加 onLoad 事件，当整个页面载入完成以后，该事件被触发，调用 init() 事件处理函数，对该事件进行处理。
　　（3）在函数 txtTyper() 中，使用 charAt 方法得到字符串中的某个字符。使用 if 条件语句判断该字符是否满足尽头。满足条件后打印在页面上。
　　（4）在 if 语句中，也可使用任意合法的 JavaScript 语句，完成更为复杂的操作。

z80vh · 发表于 2022-9-9 20:27:47

的谁vdvdsvdsvdsdsv

4r8oiin60 · 发表于 2022-9-30 23:27:01

hi哦和烦恼农家女

溪谷玉贤 · 发表于 2022-12-27 16:33:23

这个源码不错啊

e5plu · 发表于 2023-5-13 15:57:34

还有什么好东西没

ki9ku6 · 发表于 2023-5-15 09:04:29

天天源码社区www.tiantianym.com

fwn2rd · 发表于 2023-6-23 05:04:13

我找了挺久终于找到了

81708585 · 发表于 2023-7-1 19:15:27

逛逛看看瞧瞧

bp5jgbcnt · 发表于 2023-8-23 10:32:45

抽根烟，下来看看再说

fzyzy · 发表于 2023-9-11 18:13:39

还有什么好东西没

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript 打字效果的文字特效

相关帖子