字符从天而降

2010-08-22 文本操作 ℃

脚本说明:
第一步:把如下代码加入<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>区域中
<SCRIPT language="JavaScript" FPTYPE="dynamicanimation8">
<!--
dynamicanimAttr = "dynamicanimation8"
 animateElements = new Array()
 currentElement = 0
 speed = 0
 stepsZoom = 8
 stepsWord = 8
 stepsFly = 12
 stepsSpiral = 16
 steps = stepsZoom
 step = 0
 outString = ""
 function dynAnimation8()
 {
 var ms = navigator.appVersion.indexOf("MSIE")
 ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
 if(!ie4)
 {
 if((navigator.appName == "Netscape") &&
 (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
 {
 for (index=document.layers.length-1; index >= 0; index--)
 {
 layer=document.layers[index]
 if (layer.left==10000)
 layer.left=0
 }
 }
 return
 }
 for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
 {
 el = document.all[index]
 animation = el.getAttribute(dynamicanimAttr, false)
 if(null != animation)
 {
 if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
 {
 ih = el.innerHTML
 outString = ""
 i1 = 0
 iend = ih.length
 while(true)
 {
 i2 = startWord(ih, i1)
 if(i2 == -1)
 i2 = iend
 outWord(ih, i1, i2, false, "")
 if(i2 == iend)
 break
 i1 = i2
 i2 = endWord(ih, i1)
 if(i2 == -1)
 i2 = iend
 outWord(ih, i1, i2, true, animation)
 if(i2 == iend)
 break
 i1 = i2
 }
 document.all[index].innerHTML = outString
 document.all[index].style.posLeft = 0
 document.all[index].setAttribute(dynamicanimAttr, null)
 }
 if(animation == "zoomIn" || animation == "zoomOut")
 {
 ih = el.innerHTML
 outString = ""
 outString += ih
 outString += ""
 document.all[index].innerHTML = outString
 document.all[index].style.posLeft = 0
 document.all[index].setAttribute(dynamicanimAttr, null)
 }
 }
 }
 i = 0
 for (index=document.body.sourceIndex; index < document.all.length; index++)
 {
 el = document.all[index]
 animation = el.getAttribute(dynamicanimAttr, false)
 if (null != animation)
 {
 if(animation == "flyLeft")
 {
 el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
 el.style.posTop = 0
 }
 else if(animation == "flyRight")
 {
 el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
 el.style.posTop = 0
 }
 else if(animation == "flyTop" || animation == "dropWord")
 {
 el.style.posLeft = 0
 el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
 }
 else if(animation == "flyBottom")
 {
 el.style.posLeft = 0
 el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
 }
 else if(animation == "flyTopLeft")
 {
 el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
 el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
 }
 else if(animation == "flyTopRight" || animation == "flyTopRightWord")
 {
 el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
 el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
 }
 else if(animation == "flyBottomLeft")
 {
 el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
 el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
 }
 else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
 {
 el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
 el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
 }
 else if(animation == "spiral")
 {
 el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
 el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
 }
 else if(animation == "zoomIn")
 {
 el.style.posLeft = 10000
 el.style.posTop = 0
 }
 else if(animation == "zoomOut")
 {
 el.style.posLeft = 10000
 el.style.posTop = 0
 }
 else
 {
 el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
 el.style.posTop = 0
 }
 el.initLeft = el.style.posLeft
 el.initTop = el.style.posTop
 animateElements[i++] = el
 }
 }
 window.setTimeout("animate();", speed)
 }
 function offsetLeft(el)
 {
 x = el.offsetLeft
 for (e = el.offsetParent; e; e = e.offsetParent)
 x += e.offsetLeft;
 return x
 } 
 function offsetTop(el)
 {
 y = el.offsetTop
 for (e = el.offsetParent; e; e = e.offsetParent)
 y += e.offsetTop;
 return y
 } 
 function startWord(ih, i)
 {
 for(tag = false; i < ih.length; i++)
 {
 c = ih.charAt(i)
 if(c == '<')
 tag = true
 if(!tag)
 return i
 if(c == '>')
 tag = false
 }
 return -1
 }
 function endWord(ih, i)
 {
 nonSpace = false
 space = false
 while(i < ih.length)
 {
 c = ih.charAt(i)
 if(c != ' ')
 nonSpace = true
 if(nonSpace && c == ' ')
 space = true
 if(c == '<')
 return i
 if(space && c != ' ')
 return i
 i++
 }
 return -1
 }
 function outWord(ih, i1, i2, dyn, anim)
 {
 if(dyn)
 outString += ""
 outString += ih.substring(i1, i2)
 if(dyn)
 outString += ""
 }
 function animate()
 {
 el = animateElements[currentElement]
 animation = el.getAttribute(dynamicanimAttr, false)
 step++
 if(animation == "spiral")
 {
 steps = stepsSpiral
 v = step/steps
 rf = 1.0 - v
 t = v * 2.0*Math.PI
 rx = Math.max(Math.abs(el.initLeft), 200)
 ry = Math.max(Math.abs(el.initTop), 200)
 el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
 el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry)
 }
 else if(animation == "zoomIn")
 {
 steps = stepsZoom
 el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
 el.style.posLeft = 0
 }
 else if(animation == "zoomOut")
 {
 steps = stepsZoom
 el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
 el.style.posLeft = 0
 }
 else
 {
 steps = stepsFly
 if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
 steps = stepsWord
 dl = el.initLeft / steps
 dt = el.initTop / steps
 el.style.posLeft = el.style.posLeft - dl
 el.style.posTop = el.style.posTop - dt
 }
 if (step >= steps) 
 {
 el.style.posLeft = 0
 el.style.posTop = 0
 currentElement++
 step = 0
 }
 if(currentElement < animateElements.length)
 window.setTimeout("animate();", speed)
 }

//-->

</SCRIPT>

第二步:把如下代码加入<body>区域中(也就是在页面中调用脚本)
很 好 玩 吧 ! 有 没 有 吓 一 跳 ?YES!

第三步:把<body>改为
<body bgcolor="#fef4d9" onload="dynAnimation8()">

相关特效代码

热门特效代码: 输入框的文字闪烁变色引人注意; 纯CSS内页内容切换选项卡; 鼠标经过链接显示注释旋转风火轮; 指向自动选择的输入框; 放大镜链接效果; 带注释的链接特效; 文字闪烁效果; 带注释的链接特效代码; 点击文字显示隐藏链接; WEB2.0圆形边框css做法

推荐特效代码: 字符连续消隐; 文字变色逐个出现; 段落文字百叶窗效果输出; 点击文字显示隐藏链接; 文字由小变大由大变小（动态变化; 文字来回上下移动或跳动