妙趣横生的网页制作小魔术
#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="appletsbg.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 CODEBASE="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的字体型态,斜体italic、粗体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>