首页 > 代码库 > 从天而降的文字，文字掉落效果
从天而降的文字，文字掉落效果
- 从天而降的文字，文字掉落效果，文字（字符）一个个从网页顶部向下落下来，最终形成一句话。一款基于JavaScript文字特效，效果挺流畅的JavaScript文字掉落特效。
<html><head><title>从天而降的文字</title><script language=JavaScript> dynamicanimAttr = "dynamicanimation" animateElements = new Array() currentElement = 0 speed = 0 stepsZoom = 8 stepsWord = 16 stepsFly = 12 stepsSpiral = 16 steps = stepsZoom step = 0 outString = "" 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.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") 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></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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。