非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签

更新时间：2007年05月17日 00:00:00 作者：

一个朋友急着用，所以写了这个效果，代码还有改进得地方，大家可以尝试去修改以使更简洁，然后帖出来大家一起分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> body{margin:0px;font:"宋体" 12px; background-color:#000; color:#fff} </style> <script type="text/javascript"> var typer={     container : null,     speed : 100 ,     innerHTML : null ,     curpos : 0,     interval1 : null,     interval2 : null,     init : function(obj,speed){         typer.container = obj;         if(speed)typer.speed = speed;         typer.start();     },     start : function(){         typer.innerHTML = clearSpace(typer.container.innerHTML).toLowerCase();         typer.container.innerHTML = "";         typer.interval1 = setInterval("typer.type()",typer.speed);     },     type : function(){         if(typer.curpos<typer.innerHTML.length){             if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_"){                 typer.container.innerHTML +="_";             }else{                 var tempStr = "";                 if(typer.innerHTML.length>=typer.curpos+4){                     if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)=="</p>") {                         tempStr="</p>";                         typer.curpos = typer.curpos+4;                     }else if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)==""){                         tempStr="";                         typer.curpos = typer.curpos+4;                     }else{                         if(typer.innerHTML.length>=typer.curpos+3 && typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){                             tempStr="<p>";                             typer.curpos = typer.curpos+3;                         }else{                             tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                             typer.curpos++;                         }                     }                 }else if(typer.innerHTML.length>=typer.curpos+3){                     if(typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){                         tempStr="<p>";                         typer.curpos = typer.curpos+3;                     }else{                         tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                         typer.curpos++;                         }                 }else{                         tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1);                         typer.curpos++;                         }                 typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1)+tempStr;                     }         }else{             clearInterval(typer.interval1);             typer.interval2 = setInterval("typer.last()",typer.speed);         }     },     last : function(){         if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_")             typer.container.innerHTML +="_";         else             typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1);     } } function clearSpace(str){     if(str!=""){         str = str.replace(/^\s*/g,"").replace(/\s*$/g,"");     }     return str; } </script> </HEAD> <BODY onload="typer.init(document.getElementById('view'))"> <div id="view" style="font:'宋体' 12px; background-color:#000; color:#fff"> 姓名: 冷风  Email: cityvoice@hotmail.com  籍贯: 湖南 <p>爱好:打球，旅游，玩星际，唱歌</p> </div> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

用javascript实现页面打印的三种方法
用javascript实现页面打印的三种方法...
2007-03-03
重定向实现代码
重定向实现代码...
2006-11-11
点击按钮后文本框变为Select下拉列表框
在招聘类的网站会见到不少类似效果，文本框中最开始默认的是文字，如果点击更改这类的按钮文本框就变成了一个可以选择的Select下拉列表框，挺有创意，以下是代码，复制即可用啦。
2009-09-09
JavaScript 表格高亮类的应用[高级]
比较高级的JavaScript表格高亮类的应用，代码中的Js可以摘出来单独作为一个表格高亮的修饰类，使用很方便，可以控制表格某行、某列甚至是行列同时高亮显示，运行一下可以看效果。
2009-11-11
JS 仿Flash动画放大/缩小容器
JavaScript仿Flash动画放大/缩小Div容器,兼容IE和DOM，设置参数：元素对象、样式特性等,可重复使用,每个容器可以自定义大小，效果也是挺常用的。
2009-10-10
firefox(火狐)和ie浏览器禁止右键和禁止复制的代码
多浏览器兼容的禁止右键和禁止复制的代码。
2009-09-09
JavaScript实现禁止后退的方法
JavaScript实现禁止后退的方法...
2006-12-12
按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
按键盘方向键即可翻页跳转，时间上就是利用了event.keyCode,按键检测，大家可以可以参考下。
2009-11-11
一条一条新闻向上的滚动不错
[红色]一条一条新闻向上的滚动不错...
2006-08-08
一个仿DOS的Loading效果
一个仿DOS的Loading效果...
2007-02-02

非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具