- 从天而降的文字，文字掉落效果，文字（字符）一个个从网页顶部向下落下来，最终形成一句话。一款基于JavaScript文字特效，效果挺流畅的JavaScript文字掉落特效。
<html>
<head>
<title>从天而降的文字</title>
<script language=JavaScript>
dynamicanimAttr = "dynamicanimation"
animateElements = new Array()
currentElement = 0
speed = 0
stepsZoom = 8
stepsWord = 16
stepsFly = 12
stepsSpiral = 16
steps = stepsZoom
step = 0
outString = ""
function dynAnimation()
{ 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")
{ 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 = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
outString += ih
outString += "</SPAN>"
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 += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "</SPAN>"}
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")
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>
</head>
<body onload=dynAnimation() bgcolor="#99FFCC">
<p align=center dynamicanimation="dropWord"
style="LEFT: 10000px; POSITION: relative;
color: #FF0000;font-family:幼圆;font-size:60;"> </p>
<p align=center dynamicanimation="dropWord"
style="LEFT: 10000px; POSITION: relative;
color: #FF0000;font-family:幼圆;font-size:60;"><font size="5" color="#0066FF">很
不 错 的 标 题 效 果 ，试 试 吧 ! </font></p>
<hr>
<br><br><br><br><br><br><br><br>
</body>
</html>
从天而降的文字，文字掉落效果
时间： 2024-11-08 05:12:08