60度 Eadren 网络 >> 设计教程 >> 网页制作 >> Html·Css·特效 >> 特效 >> 文本特效类 >> 正文[打印] [收藏]

文字从旁边突然出现，而且可以加入链接，动态效果非常好

作者：生鱼片文章来源：互联网点击数：更新时间：2006-4-10 23:20:21

演示区

欢迎光临建站资源网谢谢!

脚本说明：

将下面的代码加在<head></head>之间

将下面的代码加在<body></body>之间

<!--

dynamicanimAttr = "mydynamicanimation"

animateElements = new Array()

currentElement = 0

speed = 0

stepsZoom = 8

stepsWord = 8

stepsFly = 12

stepsSpiral = 16

steps = stepsZoom

step = 0

outString = ""

function mydynAnimation()

{

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

<p align="center" mydynamicanimation="flyTopRightWord"

style="position: relative !important; left: 10000 !important"><strong><big><big><font

face="Arial">欢迎光临<a href="http://www.jzzy.com">建站资源网</a> 谢谢!</font></big></big></strong></p>

将下面的代码加在<body>里(例<body **加代码处**>)

上一篇教程：链接文字当鼠标放上去时就出现阴影效果，颜色也可以变化

下一篇教程：文字从左自右滚动，不是用marquee做的，很有特色的

相关文字从旁边突然出现，而且可以加入链接，动态效果非常好的文章：

60度 Eadren 网络 >> 设计教程 >> 网页制作 >> Html·Css·特效 >> 特效 >> 文本特效类 >> 正文[打印] [收藏]

文字从旁边突然出现，而且可以加入链接，动态效果非常好

网友评论

全站阅读排行

本类热门教程