• 从天而降的文字，文字掉落效果，文字（字符）一个个从网页顶部向下落下来，最终形成一句话。一款基于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;">&nbsp; </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

从天而降的文字，文字掉落效果相关推荐

  1. c语言小程序跑马灯,微信小程序实现文字跑马灯效果

    本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...

  2. php中滚动显示文字,HTML如何实现文字的滚动效果

    在HTML中,可以通过HTML的标签来实现文字的滚动效果,通过设置标签里的不同属性来实现不同的文字的滚动效果. 在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML 标签实现文字的滚 ...

  3. 如何实现文章中文字的打字效果

    如何实现文章中文字的打字效果的问题,其实,这个效果是用JavaScript来实现的,由于大多数博友网页知识不多,所以我就不深入讲解了.只要你按照本文的方法去做,保证你的文章实现打字效果! 第一步:首先 ...

  4. [css] 用css3实现文字发光的效果

    [css] 用css3实现文字发光的效果 <!DOCTYPE html> <html lang="en"><head><meta char ...

  5. html怎么在字体中加波浪线,CSS3实现文字波浪线效果

    前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...

  6. 前端开发 元素的浮动 文字环饶效果 横向排列效果 0229

    正常情况的元素布局情况 浮动的效果 立体面看 脱离平面 下面的元素会... 浮动的效果 平面看 浮动前 开始浮动 浮动发生时的文字现象 浮动前 浮动后 浮动的小结 浮动的应用情景 制作方式 先写出di ...

  7. html自动切换文字,JS实现自动切换文字的导航效果代码

    本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制 ...

  8. vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marq ...

  9. css滤镜使文字变3D效果

    为什么80%的码农都做不了架构师?>>>    四夕刚从 OECP社区看到了一篇文章 <css滤镜使文字变3D效果>,Css的确很强大, W3C 公布了样式单( CSS ...

最新文章

  1. 服务器子系统是什么,服务器是什么样子的，服务器一般用什么系统！
  2. 【转】BASE64编码规则
  3. 通过uwsgi+nginx启动flask的python web程序
  4. Python编程基础18：运算符重载
  5. 20180918-1 词频统计
  6. 数据科学高级分析 (Data science advanced analytics)
  7. 解决jupyter notebook报错500的问题
  8. 【破解手记】普利尼，破解手记[1]
  9. Flutter系列-flutter路由管理
  10. InterSystems开发者竞赛：InterSystems IRIS Analytics
  11. 美团拍店，一个“顺道”赚钱的小项目，去饭店的路上，饭钱有了
  12. 王小波 — 有趣的灵魂实难寻觅
  13. 安全需求规范和管理指南
  14. 4.6 Heuristics for Backtracking Algorithms回溯算法的启发式
  15. spring实战学习（六）事务管理
  16. 配置超过64K方法的应用程序
  17. 手把手教Apereo CAS5.2.3 注册后自动登录
  18. 中国电信推出量子加密通话；中国建成世界最大量子通信网络｜全球量子科技与工业快讯第四期
  19. vue + element 实现主页面，主页面查询，新增模态框功能
  20. FIR 基础应用 - FM 调频波调制解调(FIR 低通滤波)

热门文章

  1. SpringShell文档阅读笔记-SpringShell的基本使用
  2. Oracle笔记-Oracle基本结构及安装启动（windows版）
  3. Arduino笔记-人体感应灯项目
  4. C++ STL list排序
  5. unity 渐变消失_Unity3D实现渐变颜色效果|chu
  6. 两个sql交集_简单明了的sql基础语句
  7. java 0xf0_java 中类似js encodeURIComponent 函数的实现案例
  8. HTML跳转为啥会404,为什么网页会出现404 not found？
  9. linux java version 版本不对,linux JAVA_HOME和 java -version不匹配
  10. delphi 获取打印机默认纸张_Delphi 动态调整打印机纸张大小