生活随笔
收集整理的這篇文章主要介紹了
从天而降的文字，文字掉落效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 從天而降的文字，文字掉落效果，文字（字符）一個個從網頁頂部向下落下來，最終形成一句話。一款基于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 = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"outString += ihoutString += "</SPAN>"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 += "<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 = 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">
<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> ?
轉載于:https://www.cnblogs.com/youtianxia/p/3884298.html
總結
以上是生活随笔為你收集整理的从天而降的文字，文字掉落效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
