⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 ch3-027.html

📁 javascript demo thanks please
💻 HTML
字号:
🔍 
<HTML>
<HEAD>
<TITLE>文本特效篇--显示文本输出</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" onload=UpDownText() background="../images/background6.jpg">
<br>
<br>
<center>
<font color="ffaafa">
  <h2><font color="#FF0000" size="6">文本特效篇<font face="Times New Roman"> ——
  </font>显示文本输出</font></h2>
  </font> 
  <hr width=300>
<br><br>

<!-- 案例代码1开始 -->
 
<script language="JavaScript" fptype="UpDownWord">
  dynamicanimAttr = "UpDownWord"
  MoveElements = new Array()
  currentElement = 0
  steps = 8
  step = 0
  outString = ""

  function UpDownText()  {
    for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
    {
      el = document.all[index]
      UDText = el.getAttribute(dynamicanimAttr, false)
      if(null != UDText)      {
          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, UDText)
            if(i2 == iend)
              break
            i1 = i2
          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]
      UDText = el.getAttribute(dynamicanimAttr, false)
      if (null != UDText)      {  
        el.style.posLeft = 0
        el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight       
        el.initLeft = el.style.posLeft
        el.initTop = el.style.posTop
        MoveElements[i++] = el
      }
    }
    window.setTimeout("Move();", 0)
  }

 function Move()  {
    el = MoveElements[currentElement]
    UDText = el.getAttribute(dynamicanimAttr, false)
    step++ 
    steps = 12     
    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 < MoveElements.length)
      window.setTimeout("Move();", 0)
  }
   
  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 offsetTop(el)  {
    y = el.offsetTop
    for (e = el.offsetParent; e; e = e.offsetParent)
      y += e.offsetTop;
    return y
  } 
  
</script>

<!-- 案例代码1结束 -->


<!-- 案例代码2开始 -->

<!-- [Step1]: 这里可以更改文本的对齐方式 -->
  <p UpDownWord="dropWord"
style="position: relative !important; left: 10000 !important" align="center"> 
    <!-- [Step2]: 这里可以更改文本的大小 -->
    <!-- [Step3]: 这里可以更改文本的颜色 -->
    <!-- [Step4]: 这里可以更改文本的内容 -->
    <font face="黑体">
    <i><b><font size="5">文 本 特 效 篇</font><font face="宋体"> </font>
    <font face="Times New Roman">
    ——</font><font face="宋体"> </font>
    <font face="黑体" size="5">
    显 示 文 本 输 出</font><font size="5" color="#4403dF"> 
    </font></font></b></i></p>

<!-- 案例代码2结束 -->


</center></BODY>

</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -