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

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

New Document

body{margin:0px;font:"宋体" 12px; background-color:#000; color:#fff}

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.curpos+4){
if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)=="

") {
tempStr="

";
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)=="

"){
tempStr="

";
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)=="

"){
tempStr="

";
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;
}

姓名: 冷风

Email: cityvoice@hotmail.com

籍贯: 湖南

爱好:打球,旅游,玩星际,唱歌

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • C++实现类似延时停顿的打字效果

    能够定位光标位置,改变屏幕设置 #include <iostream> #include <windows.h> #include <conio.h> #include <stdlib.h> //system函数所需头文件 #define stoptimelong 500 //Sleep函数以毫秒为单位,Sleep(500);表示停半秒 using namespace std; //跳到屏幕指定坐标 void gotoxy(int x,int y) { CO

  • Js 打字效果 逐一出现的文字

    第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit

  • 用js实现的打字效果的带链接的新闻标题

    网打字效果的带链接的新闻标题 body{font-size:14px;font-weight:bold;} 最新内容: =hwnewstr.length){ clearInterval(txttimer); clearInterval(newstimer); newsi++; if(newsi>=newstitle.length){ newsi = 0 } newstimer = setInterval("shownew()",NewsTime); txti = 0; retur

  • 不使用jquery实现js打字效果示例分享

    复制代码 代码如下: <h1>Libraries give you  <span class="txt-rotate fw700" data-period=500" data-rotate='[ "knowledge", "community", "an outlet", "中国起源", "OSCHINA" ]'></span></h1

  • 打字效果

    h3{COLOR: #ffffff; FILTER: glow(color=ef09da,strength=1) dropshadow(color=#00ff00,offx=1, offy=1, positive=2);width:600;text-indent: 2em} var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.lay

  • javascript 打字效果的文字特效

    本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

  • js打字机效果代码

    Type Writea{text-decoration:none} // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var current = 0 var x = 0 var speed = 70 var speed2 = 2000 function initArray(n) { this.length = n; for (var

  • javascript之textarea打字机效果提示代码推荐

    比较不错的应用 function $(id){return document.getElementById(id);} var msgall="一个专业的收藏精品脚本学习资料的网站,修正错误,努力打造精品脚本学习站,我们将会为大家附上游戏脚本资源,源码,软件等信息" var msg = "输入问题内容,点击"我要提问"." ; var interval = 100 var spacelen = 100; var space10=" &q

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

    一个朋友急着用,所以写了这个效果,代码还有改进得地方,大家可以尝试去修改以使更简洁,然后帖出来大家一起分享 New Document body{margin:0px;font:"宋体" 12px; background-color:#000; color:#fff} var typer={ container : null, speed : 100 , innerHTML : null , curpos : 0, interval1 : null, interval2 : null,

  • 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

  • JS模拟键盘打字效果的方法

    本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

  • 幻宇的层模拟窗口效果-提供演示和下载

    看到有人问起幻宇的层模拟窗口效果,所以抽了点时间提取出来了,仅学习之用,请幻宇不要见怪!演示地址:http://www.gzfangzi.com/demo/DivWin/divWin.htm 下载此文件

  • js实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

  • jQuery实现标题有打字效果的焦点图代码

    本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站

  • 打字效果动画的4种实现方法(超简单)

    方法一(纯css实现): html代码: <h1 class="typing typing-item">打字动画打字动画打字动画</h1> css样式: .typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5%; font-weight: normal; letter-spacing: .3rem; -webkit-animation: type 2s steps(50, end) forwards

  • JS实现的自动打字效果示例

    本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

  • JS实现在状态栏显示打字效果完整实例

    本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J

随机推荐