码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-01 10:42:42      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   os   io   for   art   

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

 

从天而降的文字,文字掉落效果,布布扣,bubuko.com

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

标签:style   blog   color   java   os   io   for   art   

原文地址:http://www.cnblogs.com/youtianxia/p/3884298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!