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

  • 相关阅读:
    03 重定向,请求转发,cookie,session
    02 http,servlet,servletconfig,HttpServletRequest ,HttpServletResponse
    02 JDBC相关
    01 mysql
    16 反射,枚举,新特性
    13 递归练习
    12 IO流
    11 异常
    兼容当前五大浏览器的渐变颜色背景gradient的写法
    Electron Browser加载iframe(webview src属性)
  • 原文地址:https://www.cnblogs.com/webdm/p/1989983.html
Copyright © 2011-2022 走看看