zoukankan      html  css  js  c++  java
  • JS动画效果文字慢慢放大的菜单代码

    代码简介:

    动画效果慢慢放大的菜单,菜单依次由小变大,像FLASH动画一样,效果很流畅,只不过代码稍嫌多,可以学习一下JS的用法。

    代码内容:

    <html>
    <head>
    <title>JS动画效果文字慢慢放大的菜单代码_网页代码站(www.webdm.cn)</title>
    <SCRIPT language=JavaScript FPTYPE="dynamicanimation">
    <!--
      dynamicanimAttr = "dynamicanimation"
      animateElements = new Array()
      currentElement = 0
      speed = 0
      stepsZoom = 8
      stepsWord = 8
      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" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
            {
              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" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
            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()>
      <div align=center>
        <table width="400" border="0" height="333">
        <tr>
          <td height="33"> 
            <div align="center"><font color="#006600">动态放大菜单</div>
          </td>
        </tr>
        <tr> 
          <td height="300"><a href="/" 
                target=_parent>WebDm.Cn</a> 
            <p style="LEFT: 10000px! important; POSITION: relative! important" 
                dynamicanimation="zoomIn"><a href="/">ASP</a></p>
            <p style="LEFT: 10000px! important; POSITION: relative! important" 
                dynamicanimation="zoomIn"><a href="/" 
                target=_parent>PHP</a></p>
            <p style="LEFT: 10000px! important; POSITION: relative! important" 
                dynamicanimation="zoomIn"><a href="/">ASP.NET</a></p>
            <p style="LEFT: 10000px! important; POSITION: relative! important" 
                dynamicanimation="zoomIn"><a href="/">AJAX</a></p>
          </td>
        </tr>
      </table>
      </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/909b5421-6c07-4023-9e18-81cfe8d2ddaf.html

  • 相关阅读:
    hdu 5646 DZY Loves Partition
    bzoj 1001 狼抓兔子 平面图最小割
    poj 1815 Friendship 最小割 拆点 输出字典序
    spoj 1693 Coconuts 最小割 二者取其一式
    hdu 5643 King's Game 约瑟夫环变形
    约瑟夫环问题
    hdu 5642 King's Order
    CodeForces 631C Report
    1039: C语言程序设计教程(第三版)课后习题9.4
    1043: C语言程序设计教程(第三版)课后习题10.1
  • 原文地址:https://www.cnblogs.com/webdm/p/1989983.html
Copyright © 2011-2022 走看看