妙趣横生的网页制作小魔术

Author: 黄向东 Date: 1997-01-01

  现在的网页,似乎不加点JAVA的东西就很不上“感觉”。所以,本人到处去挖了一些免费的JAVA Applets,并且仔细阅读了英文说明,研究它们的具体用法,现在告诉你几个有趣的小魔术,希望你会喜欢。
#2  变化按钮
  注意:如果你用的是IE3.0的浏览器,那么很抱歉,你将看不到任何变化,也不会知道程序是怎样执行的,所以请使用Netscape 3.0以上版本的浏览器观看。这是本人最喜欢在网页上搞的花样之一!
  先准备好你想要变化的图案,并将这些图片放到和网页程序相同的目录里。
  在本例中原来的图片是b1.gif、b2.gif,按下后显示的图片是bh1.gif、bh2.gif。将以下标签安插到你的网页之间:
  <SCRIPT LANGUAGE="JAVASCRIPT">
  <!──
  var img_item1,img_item2;
  var img_hitem1,img_hitem2;
  var img_item;
  var img_text1,img_text2;
  var dl_ok
  var ap_name=navigator.appName;
  var ap_vinfo=navigator.appVersion;
  var ap_ver=parseFloat(ap_vinfo.substring(0,ap_vinfo.indexof(()));
  function init()
  {
  if(ap_name=="Netscape" &&
  ap_ver>=3.0)
  {
  img_item1=new Image();
  img_item1.src="b1.gif";
  img_item2=new Image();
  img_item2.src="b2.gif";
  img_hitem1=new Image();
  img_hitem1.src="bh1.gif";
  img_hitem2=new Image();
  img_hitem2.src="bh2.gif";
  }
  dl_ok=true;
  return true;}
  function return_image(pre)
  {
  if(pre!=null)
  {
  eval("document.imge_b"+pre+".src=img_item"+pre+".src;");
  return true;}  }
  function image_switch(selection,msg)∥show the effect of image switch for menu or toolbar
  {
  if(ap_name=="Netscape"&&ap_ver>=3.0&&dl_ok)
  {
  ∥eval("document.imge_msg.src=img_text"+selection+".src;");
  return_image(img_item);
  eval("img_item="+selection+";");
  eval("document.imge_b"+selection+".src=img_hitem"+selection+".src;");
  }
  window.status=msg;
  return true;}
  ∥──>
  </SCRIPT>
  把b1.gif、b2.gif和bh1.gif、bh2.gif换成你的图片即可。
#2  变色字
  下面介绍的第一个JAVA Applets看起来很花俏,那些字不时会变变颜色及位置,还算有趣啦!
#3  【蹦蹦跳跳的变色字】
  1.下载JitterText.zip(4K),下载完后将文件解压缩,将JitterText.class这个文件复制到你存放网页的目录下。
  2.在你的网页间加入以下语句即可:
  <applet code="JitterText.class" width=350 height=40>
  <param name=BGCOLOR value="000000">
  <param name=TEXTCOLOR value="FF0000">
  <param name=TEXT value="欢迎光临滴水小筑首页制作屋!">
  <param name=SPEED value=250>
  <param name=RANDOMCOLOR value=1>
  </applet>
  “欢迎光临..!”这一句可以自己修改!不过要注意:宽度不够的时候,请把width的值再加大!对了!那个数字如果比较小,字体会自动变大,反之则变小。
  接下来介绍的这个JAVA Applets就比较漂亮,不过,执行速度好像比较慢,玩玩看看吧!
#3   【流动变色字】
  <applet code="fxText.class" width=283 height=68>
  <param name=BACKGROUND value="appletsbg.gif">
  <param name=FOREGROUND value="applets.gif">
  </applet>
   它的原理实在是很简单,准备两张图,一张在上面而且必须要有一部份是透明的,另外一张在下面,当作底色,然后,底下那一张不断地动,透过透明的部份,看起来就很漂亮了!本程序中第一个图appletsbg.gif是底图,第二个图applets.gif才是上面的图。
#3  【水中倒影】
  下载【水中倒影】JAVA小程序并解开lake.zip后,你会发现有三个文件:
  Lake.class:JAVA程序原始文件
  lack.htm:范例文件
  demo.jpg:范例图片
  将Lake.class复制到你网页的目录中,然后在你的网页中加入这一段:
  <applet code="Lake.class" align="left" width="200" height="90" id="Lake">
  <param name="image" value="lake.gif">
  </applet>
  其中width="200" height="90"要根据图片的大小做调整,本例的图片为200×50,故width="200",但要注意的是,高度最好比图片本身高度的两倍少一点,比如本例中图片的高度原有50,但却只设成height="90",这是为了避免在最底下会有一小列灰色的底色不断的出现,看不懂吧!试试看将height设成"100"就知道是怎么回事了。至于图片名称可以自行更改,图形格式JPG及GIF都可以。
#2  随机提示
  玩过Linux的人一定知道,每次进操作系统,它都会出现不同的小小的一段话,这样的功能是否总让人惊奇呢!现在,我们也能把这玩意儿搬上网页了!发挥你的想像力,将这功能发挥到极致吧!
  <SCRIPT Language="JavaScript">
  tips=new Array(6);
  tips[0]="这是个随机的提示,再按一次Reload看看!";
  tips[1]="每次按Reload都会有不一样的结果出现喔!";
  tips[2]="随机提示是不是很简单呢?";
  tips[3]="赶快把这个随机提示的原始文件COPY回去吧!";
  tips[4]="这是个很实用的东西喔!发挥您的创意吧!";
  tips[5]="赶快把他安装到您的网页里去吧!";
  index=Math.floor(Math.random()*tips.length);
  document.write("<CENTER>"+tips[index]+"</CENTER><P>");
  </SCRIPT>
  其中Array的元素数要和你所设置的tips数相同,本例共设了6个tips,故为Array(6)。
#2  时间和日期
  下面是一些锦上添花的功夫了,有些网页会自动显示日期或是时钟,蛮新奇的。
#3  【小时钟部份】
  加入下行即可,其中dd=12,除了12以外还有13到16四种字型!
  <img src="http:∥counter.nsysu.edu.tw/Count.cgi?
  display=clock&dd=12"></img>
  实际上你会发现,上面这个方法所得到只是进站那瞬间的时刻,并非像真的时钟一样。那有没有办法让它一分一秒的动呢?当然有!
  第一种方法是:一字不动的加入框内指令!
  <APPLET WIDTH=80 HEIGHT=20 CODEBASE="http:∥www1.chpi.edu.tw/Applet/"
  CODE="DigitalClock.class">
  <PARAM NAME=barsize VALUE="6">
  <PARAM NAME=barwidth VALUE="2">
  <PARAM NAME=barspace VALUE="1">
  <PARAM NAME=bulletsize VALUE="3">
  <PARAM NAME=between VALUE="3">
  <PARAM NAME=bordersize VALUE="1">
  <PARAM NAME=text VALUE="00FFFF">
  <PARAM NAME=bgcolor VALUE="000000">
  <PARAM NAME=bordercolor VALUE="000000">
  </APPLET>
  然后你就会看到一个时钟了!
  第二个方法比较好一点!先抓回jclock.zip(3K),解开(jclock.zip)后,在目录下会有下列的文件与子目录:
  Dgclcok.class──这是Java source compile后的byte code。
  /jimages/──存放此Java Clock相关图形文件的子目录!
  加入下面三行即可!
  <applet code="Dgclock.class" width=100 height=30>
  <param name="ShowDate" value="yes">
  </applet>
#3  【日期部份】
  加入下行即可,其中dd=12,除了12以外还有13到16四种字型!
  <img src="http:∥counter.nsysu.edu.tw/Count.cgi? display=date&dd=12></img>
  今天日期:<图片>
  进站时间:<图片>
  上述所有JAVA小程序均可由如下网址下载:
  http:∥members.tripod.com/~  huangxd/
  http:∥www.taconet.com.tw/~  huangxd/
#2  【看板一】
  不知道你有没有注意到,在有些网页的最下方,常常会看见一排字"咕噜咕噜"地冒出来,知道那是怎么做的吗?把下列这些东西加进去就可以了!
  <SCRIPT LANGUAGE="JavaScript">
  <!--function scroll(seed)
  {var m1="欢迎光临"
   var m2="请使用Netscape 3.0或IE 3.0,谢谢!"
   var msg=m1+m2;
   var out="   ";
   var c=1;
   if(seed>100) {
   seed--;
   var cmd="scroll("+ seed+")";
   timerTwo=window.setTimeout(cmd,100);}
   else if(seed<=100 && seed>0) {
   for(c=0;c<seed;c++) {
   out+="   ";
   }
   out+=msg;
   seed--;
   var cmd="scroll("+ seed+")";
   window.status=out;
   timerTwo=window.setTimeout(cmd,100);
   }
   else if(seed<=0) {
   if(-seed<msg.length) {
   out+=msg.substring(-seed,msg.length);
   seed--;
   var cmd="scroll("+ seed+")";
   window.status=out;
   timerTwo=window.setTimeout(cmd,100);}
    else {
   window.status="   ";
   timerTwo=window.setTimeout("scroll(100)",7);
   }}}
  timerONE=window.setTimeout(scroll(100),50);
  //-->
  </SCRIPT>
  变量m1、m2中的内容可依自己的喜好填入。
#2  【看板二】
  跑马灯的花样很多,但是通常没有办法改变底色或是字体的颜色,在设定的时候,也须大费周章,还不见得在每个浏览器下都能正常运作,实在很不方便!现在,救星终于出现了!这个Java的看板,不但设定简单容易上手,而且功能强大,不用再担心能否在不同浏览器下运作的问题了!
  1.下载ticker.zip(4K),下载完后将文件解压缩,将 ticker.class这个文件复制  到你网页的目录底下。
  2.在你的网页中加入下面这一段就大功告成了:
   <applet code="ticker.class"width=451 height=28>
  (说明:这行是设定看板的大小)
  <param name=bgco value="0,105,0">
  (说明:这行是设定看板背景颜色)
  <param name=speed value="4">
  (说明:这行是设定看板内容移动的速度)
  <param name=msg
  value="欢迎光临滴水小筑网页制作屋,这个跑马灯是一个很棒的JAVA Applets不但可以设定跑马灯的大小,还可以很快的调整速度以及设定背景、字体的颜色,如何?很棒吧! ">
  (说明:这行是设定看板的主要内容)
  <param name=txtco value="255,255,255">
  (说明:这行是设定看板字体的颜色)
  </applet>
  (说明:结束)
#2  【看板三】
  或许你会觉得,下面这个东西不就是跑马灯吗?只是方向不同罢了...其实不然。它比跑马灯强多了!你可以要它停留,也可以设定每行不同的大小、颜色、速度、字体... 除了神奇以外,还有什么可以形容的呢?别犹豫,快抓回去玩吧!
  1.下载OCV.zip(7K),下载后解压缩,将OCVscroll.class复制到你放置网页的目录下。
  2.在你的网页中,置入下列原始码:
  <applet code="OCVscroll.class" align="absbottom" width="470" height="35">
  (说明:设定看板的大小)
  <param name="bgcolor" value="#000000">(说明:设定看板的背景色)
  <param name="centertext" value="false">
  <param name="delay0" value="4000">
  (说明:这行是设定内容停留的时间,一秒=1000)
  <param name="delay2" value="3000">
  <param name="delay4" value="2000">
  <param name="delay6" value="1000">
  <param name="delay8" value="0000">
  <param name="desc0" value="延迟4秒,字体大小12,正常字,红色">
  (说明:这行是设定看板中desc0的主要内容)
  <param name="desc1" value="">
  <param name="desc2" value="延迟3秒,字体大小14,正常字,黄色">
  <param name="desc3" value="">
  <param name="desc4" value="延迟2秒,字体大小16,斜体字,绿色">
  <param name="desc5" value="">
  <param name="desc6" value="延迟1秒,字体大小18,粗体字,蓝色">
  <param name="desc7" value="">
  <param name="desc8" value="延迟0秒,字体大小20,粗体字,紫色">
  <param name="desc9" value="">
  <param name="fontface0" value="Courier">
  (说明:这行是设定看板中desc0的字型)
  <param name="fontface2" value="Courier">
  <param name="fontface4" value="Courier">
  <param name="fontface6" value="Courier">
  <param name="fontface8" value="Courier">
  <param name="hlcolor" value="110,110,110">
  <param name="lrmargins" value="5">
  <param name="Notice" value="Smooth Scroll Up II,(c) 1997,OpenCubeTechnologies,Unregistered">
  <param name="scrolldelay" value="25">
  (说明:这行是设定看板内容流动的速度)
  <param name="size0" value="12">
  (说明:这行是设定看板中desc0的字体大小)
  <param name="size2" value="14">
  <param name="size4" value="16">
  <param name="size6" value="18">
  <param name="size8" value="20">
  <param name="style0" value="">
  (说明:这行是设定看板中desc0的字体型态,斜体italic、粗体bold,不填为正常字型)
  <param name="style2" value="">
  <param name="style4" value="italic">
  <param name="style6" value="bold">
  <param name="style8" value="bold">
  <param name="textcolor0" value="255,0,0">
  (说明:这行是设定看板中desc0的字体颜色)
  <param name="textcolor2" value="255,255,0">
  <param name="textcolor4" value="0,255,0">
  <param name="textcolor6" value="0,255,255">
  <param name="textcolor8" value="255,0,255">
  </applet>