html中的打字效果_随笔

打字效果的文字特效[修改显示的文字即可]

以下代码放在HTML的<body></body>之间[适当的位置]：

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)with(document[obj]){ document.open()document.write(str)document.close()}

if(style)eval(obj+'.innerHTML=str')}

var dispStr=new Array("这里是你想要打的字")

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

setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay)}}

function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 300, 0)}

</script>

</BODY>

源码：

逐字出来的效果，哈哈哈哈哈哈哈哈哈

var index = 0

var str = document.getElementById("string").innerHTML

setInterval(function() {

if(index == str.length) {

//清除定时器

clearInterval()

//若要让效果无限循环，把index归0即可

// index = 0

}

var a = document.getElementById("showStr")

a.innerText = str.substring(0, index++)

},400)

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6109330.html

html中的打字效果

发表评论

评论列表（0条）