當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从天而降的文字，文字掉落效果

發(fā)布時間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了从天而降的文字，文字掉落效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

從天而降的文字，文字掉落效果，文字（字符）一個個從網(wǎng)頁頂部向下落下來，最終形成一句話。一款基于JavaScript文字特效，效果挺流暢的JavaScript文字掉落特效。

<html> <head> <title>從天而降的文字</title> <script language=JavaScript>dynamicanimAttr = "dynamicanimation"animateElements = new Array()currentElement = 0speed = 0stepsZoom = 8stepsWord = 16stepsFly = 12stepsSpiral = 16steps = stepsZoomstep = 0outString = ""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.innerHTMLoutString = ""i1 = 0iend = ih.lengthwhile(true){ i2 = startWord(ih, i1)if(i2 == -1)i2 = iendoutWord(ih, i1, i2, false, "")if(i2 == iend)breaki1 = i2i2 = endWord(ih, i1)if(i2 == -1)i2 = iendoutWord(ih, i1, i2, true, animation)if(i2 == iend)breaki1 = i2}document.all[index].innerHTML = outStringdocument.all[index].style.posLeft = 0document.all[index].setAttribute(dynamicanimAttr, null)}if(animation == "zoomIn" || animation == "zoomOut"){ ih = el.innerHTMLoutString = ""outString += ihoutString += ""document.all[index].innerHTML = outStringdocument.all[index].style.posLeft = 0document.all[index].setAttribute(dynamicanimAttr, null) }}}i = 0for (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.offsetWidthel.style.posTop = 0}else if(animation == "flyRight"){ el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidthel.style.posTop = 0}else if(animation == "flyTop" || animation == "dropWord"){ el.style.posLeft = 0el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight}else if(animation == "flyBottom"){ el.style.posLeft = 0el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight}else if(animation == "flyTopLeft"){ el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidthel.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight}else if(animation == "flyTopRight" || animation == "flyTopRightWord"){ el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidthel.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight}else if(animation == "flyBottomLeft"){ el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidthel.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight}else if(animation == "flyBottomRight" || animation == "flyBottomRightWord"){ el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidthel.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight} else if(animation == "spiral"){ el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidthel.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight}else if(animation == "zoomIn"){ el.style.posLeft = 10000el.style.posTop = 0}else if(animation == "zoomOut"){ el.style.posLeft = 10000el.style.posTop = 0}else{ el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidthel.style.posTop = 0}el.initLeft = el.style.posLeftel.initTop = el.style.posTopanimateElements[i++] = el}}window.setTimeout("animate();", speed)}function offsetLeft(el){ x = el.offsetLeftfor (e = el.offsetParent; e; e = e.offsetParent)x += e.offsetLeft;return x} function offsetTop(el){ y = el.offsetTopfor (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 = trueif(!tag)return iif(c == '>')tag = false}return -1}function endWord(ih, i){ nonSpace = falsespace = falsewhile(i < ih.length){ c = ih.charAt(i)if(c != ' ')nonSpace = trueif(nonSpace && c == ' ')space = trueif(c == '<')return iif(space && c != ' ')return ii++}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 = stepsSpiralv = step/steps rf = 1.0 - vt = v * 2.0*Math.PIrx = 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 = stepsZoomel.style.fontSize = Math.ceil(50+50*step/steps) + "%" el.style.posLeft = 0}else if(animation == "zoomOut"){ steps = stepsZoomel.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%" el.style.posLeft = 0}else{ steps = stepsFlyif(animation == "dropWord")steps = stepsWorddl = el.initLeft / stepsdt = el.initTop / stepsel.style.posLeft = el.style.posLeft - dlel.style.posTop = el.style.posTop - dt}if (step >= steps) { el.style.posLeft = 0el.style.posTop = 0currentElement++step = 0}if(currentElement < animateElements.length)window.setTimeout("animate();", speed) } </script> </head> <body onload=dynAnimation() bgcolor="#99FFCC">   很不錯的標題效果，試試吧 ! <hr> </body> </html>

轉載于:https://www.cnblogs.com/youtianxia/p/3884298.html

總結

以上是生活随笔為你收集整理的从天而降的文字，文字掉落效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决ng界面长表达式(ui-set)
下一篇： EntityFramework走马观花之