网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 文字链接 >> 正文
最新文章
· 单行文字上下无缝循环滚动
· 鼠标移入/移出颜色渐变
· 链接翻滚的文字特效
· 鼠标跟随效果的链接文字提示
· JS仿腾讯QQ网站的链接文字提示效果
· 链接文字向下一像素
· CSS实现带背景图片的文字链接
· Effects Module效果,jQuery 隐性文本
· JS实现打字机式字符输出效果
· 从天上掉下来的文字
热门文章
 CSS实现链接下划虚线效果
 JS实现打字机式字符输出效果
 单行文字上下无缝循环滚动
 符合标准的间歇性向上滚动代码(兼容
 JavaScript实现搜索关键字高亮
 Javascript动态调整文章的行距、字
 支持链接到新页面的锚点平滑跳转-A
 显示在文本框里的Js打字效果代码
 CSS实现带背景图片的文字链接
 JS实现字体大中小切换
相关文章
显示在文本框里的Js打字效果代码
JS实现打字机式字符输出效果
来源:源码爱好者 更新时间:2011/1/12 10:25:06 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS打字机风格的字符输出特效</title>
<SCRIPT language="JavaScript">
<!--
 var layers = document.layers, style = document.all, both = layers || style, idme=908601;
 if (layers) { layerRef = 'document.layers'; styleRef = ''; } if (style) { layerRef = 'document.all'; styleRef = '.style'; }
 function writeOnText(obj, str) {
   if (layers) with (document[obj]) { document.open();  document.write(str); document.close(); }
   if (style) eval(obj+'.innerHTML= str');
 }
 //以下是输出的内容,自己修改即可。
 var dispStr = new Array(
 "<font color=red size=3>欢迎来到源码爱好者...</font><br><font color=green size=3>她为我们提供各类编程源码、素材、书籍教程、设计模板、网页特效代码以及常用软件下载。</font><br><font color=blue size=3>是一个有质量的学习型源码下载站。</font>"
 );
 var overMe=0;
 function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
   var tmp0 = tmp1 = '', skip = 0;
     if (both && idx <= str.length) {
  if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
  if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
  tmp0 = str.slice(0,idx);
  tmp1 = str.charAt(idx++);
  if (overMe==0 && plysnd==1) {
    if (navigator.plugins[0]) {
      if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
   document.embeds[0].stop();
   setTimeout("document.embeds[0].play(false)",100); }
    } else if (document.all) {
   ding.Stop();
   setTimeout("ding.Run()",100);
    }
    overMe=1;
  } else overMe=0;

  writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
  setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
   }
 }

 function init() {
  txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0);
 }
 // -->
</SCRIPT>
</head>
<body bgcolor="#fef4d9" onload="init()">
<DIV class=ttl1 id=ttl0><SPAN class=ttl1></SPAN></DIV>
</body>
</html>

△运行 ☉预览 #复制 +收藏
特效说明:

  像打字机一样输出自己的内容,内容可以自己修改。在内容区可自己定义字号、字体样式、字体颜色等,打字的速度也是可以调节的,在JavaScript代码段部分。本效果用于网站公告挺好,在网页的顶部留一行的空间,用打字效果输出你的公告信息,因为文字写在HTML网页的JS内,因此搜索引擎也是可以抓到的。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号