从天上掉下来的字符，超棒的JavaScript文字特效，这款动画的形式其实超不错，以前在学Flash的时候，经常喜欢做这种文字效果，用Js实现的借得借鉴，不过代码有点多，有些朋友会不喜欢哦。

点击(此处)折叠或打开

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<title>石家庄水泵厂</title>
</head>
<body>
<p www_helpor_net=\"dropWord\" style=\"position: relative !important; left: 10000 !important\" align=\"center\"><font size=\"3\" color=\"#ee00FF\">我从天而来，是神仙，有什么事可以找我！</font><font size=\"7\" face=\"Arial\" color=\"#FF0000\"><b>YES!</b></font></p>
<SCRIPT language=\"JavaScript\">
<!--
dynamicanimAttr = \"www_helpor_net\"
animateElements = new Array()
currentElement = 0
speed = 0
stepsZoom = 8
stepsWord = 8
stepsFly = 12
stepsSpiral = 16
steps = stepsZoom
step = 0
outString = \"\"
function helpor_net()
{
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)
}
helpor_net()
//-->
</SCRIPT>
</body>
</html>

ITPub博客

从天上掉下来的文字，Js特效

最新文章