微信公众号 
图码生活

每天发布有五花八门的文章,各种有趣的知识等,期待您的订阅与参与
电脑报 1992-2001 十年文章全集
电脑报 1992-2001 十年文章全集
包含从 1992 年 - 2001 年间,两万余篇期刊文章,查询最少输入两个字符
随便看看
读取中
读取中
标题网页打字效果轻松做
栏目网络与通信
作者吴斌
发布2001年20期
  笔者在网上冲浪,发现一个不错的Jsvascript网页特效,就像电视上的打字广告一样,文字逐行显示出来,很是惹人喜爱。如果把这个效果用于网站的欢迎页面或是某个特定页面,一定会引人注目。下面,我来介绍一下这个效果的做法。
  第一步,在网页文件的<head></head>中插入这样一段代码:
  <script language="javascript">
  ' 设置打字效果从第几个字开始,0表示从第一个字开始
  var pos=0;
  ' 设置打字的速度,可以根据需要任意调节
  var speed=200;
  ' 这里放置打字效果的文字内容
  var msg="《电脑报》,我最喜爱的电脑报刊之一,她是我工作、学习中的良师益友!祝愿《电脑报》越办越好,当然还有她的网站http://www.cpcw.com啦!:)"
  function Type(){   
  pos++;
  if (msg.substring(pos-1.pos)== " ")
  {
  pos++
  }
  text=msg.substring(0,pos);
  ' 调用新层layerA表达打字效果
  if(document.layers)
  {
  document.layers.layerA.document.open();
  document.layers.layerA.document.write("<div style='position:absolute;top:0px;left:0px;font-family:Courier New;font-size:18px;color:#00ff00'>" + text + "</div>");
     }
  document.layers.layerA.document.close;
  }
  else if(document.all);
  {
  document.all.layerA.innerHTML=text
  if (pos <msg.length);
   }
  tmer=setTimeout('Type();',speed);
  }
  }
  //-->
  </script>
  第二步,修改<body>……</body>,使之变为<body  bgcolor-=000000  onLoad="Type()">……</body>(本例中的页面背景及文字颜色可以根据各人喜好设置)。
  第三步,在页面需要表达打字效果的位置,插入一个新层layerA,代码如下:
  <div id="layerA" style="position:relative;font-family:Courier New;font-size:18px:color:#00ff00"></div>
  保存文件后,在浏览器中打开,我们便可看到漂亮的打字效果了!