- 从天上掉下来的字符,超棒的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博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1245446/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1245446/