常州五颜六色网络技术有限公司 -> 网站建设 -> 公司建站完全手册――特效的运用 登录 -> 注册 -> 回复主题 -> 发表主题

阿七 2006-04-04 08:18
不仅仅是一些个人网站,现如今一些企业网站也“动”感实足,很多特效根本无法用动画软件作出来,而是用JavaScript,JavaApplet等程序语言写出来的。如果你也想在自己或公司的网站上加上一些特效,但是又不懂程序,怎么办?最简单的办法就是去网上找特效代码,网上有很多免费的特效代码,只要你有一点点程序基础,就可以修改一些参数为己所用。这里主要介绍两种特效: Java Applet或者JavaScript。 3GVE/GtU  
8 tq6.%\  
一、JAVA Applet特效的运用 s/[15  
Fx#0 :p  
  什么是Java Applet呢?这里稍作解释:Java Applet是用Java编写的一些小程序,可以直接嵌在HTML文件中,以达到一些特殊的效果。我们可以用Java Applet实现一些文字,图片等特效,经常上网的朋友可能看到过一种类似湖面效果的特效,相当逼真,就像真的一样。这就是用Java Applet实现的。Java Applet也可以达到人机交互的效果,比如一张图片,当鼠标移到上面会产生波动,就像现实中手波及水面使得水开始波动。这也可以用Java Applet实现。 ;#c|ZnX  
tY$ .(2Ua  
  Java Applet要求用户的浏览器支持JAVA。现在一般的浏览器都支持JAVA。所以你大可以放心地在你的网站中用此类的特效。 `:WVp~fn  
,VZ;=  
Java Applet在网页中的基本结构如下: YrAaL"20  
i8R.Wl$l  
< applet code=“effect.class” width = 300 height=300 > `P1jg$(eA  
< param name=img value="image.gif" > :%GxU;<E{  
< /applet > ?^iX%   
\(UEjlo  
  其中effect.class是就是以JAVA编写的一个特效程序。Width和height是设定在网页中运行时的高度与宽度。Param是特效的一些参数。包含名称(name)跟值(value),比如上面是对图片image.gif应用该特效。

阿七 2006-04-04 08:18
下面举个简单的例子: btb-MSkO  
Tysh~C|1  
< applet CODE="TypeIt.class" WIDTH=250 HEIGHT=200 > cw#p!mOi~  
< param name=TXT value="本站最近更新信息如下: s$xctIbm?,  
|1、公司产品栏目新增最新研发的... !!f)w!wW  
|2、公司新闻栏目新增最新公司信息" > &,Dh*)k  
< param name=TXTCOLOR value="ff00ff" >   /* 设定文本颜色,这里是紫色 */ |;{^Mci%  
< param name=BGCOLOR value="ffffff" >   /* 设定背景色 */ B]]_rl,  
< param name=TXTHIGHCOLOR value="000000" >   /* 当鼠标移到Applet上文本的颜色,如图3所示 */ 8^j u=  
< param name=SIZE value="16" >   /* 设定文本的字号 */ $A6'YgK  
< param name=PAUSE value="150" >   /* 每打一个字停顿的时间 */ 5T}$+R0&  
< param name=ENDPAUSE value="1000" >   /* 最后一个字打完以后的停顿时间,然后重复打字 */ c:"*MM RC  
< param name=LINKTO value="http://www.corpration.com/" >   /* 设定链接,即当鼠标点击该Applet可以链接到指定地址 */ mJ0nyjX^  
< param name=FONTFACE value="Courier" >   /* 设定文本的字体 */ H?ssV^k  
< param name=STYLE value="BOLD" >   /*设定文本的字体样式,比如粗体,斜体等*/ "XMTj <D  
< /applet >
u9}}}UN!  
PH 97O`"  
  上面的Applet实现的是打字效果。TypeIt.class是打字效果程序,可以去一些免费特效代码网站去下载。现在将打字效果应用于“本站最近更新信息如下:|1、公司产品栏目新增最新研发的...|2、公司新闻栏目新增最新公司信息”这段文字。其中“|”是分隔各行,即这段文字以三行出现。如图1,图2。其它各参数参见上面代码后面的说明。 \^SL Zhe  
-wlob`3  
#B:J7&@fn  
My'M ~#kO,  
  这种效果特别适合于企业发布一些重要的,最新的,想让客户尽快了解的信息 F >2t=r*9  

阿七 2006-04-04 08:19
二、JavaScript特效的运用 j(6:   
d6,%P 6  
  JavaScript是内嵌于HTML的一种脚本语言。客户端的JavaScript程序不需要发送到服务器端处理,而直接在客户端的浏览器就能够解释执行。大家知道HTML是静态的,我们可以通过在HTML中嵌入JavaScript程序以达到网页的交互及动态等效果。正因为JavaScript有如此优越的条件,使得在网页中的运用越来越广泛。 yAR''>  
,XCC#F(d1  
  JavaScript可以实现的效果有很多,诸如:文本特效、页面特效、菜单按钮特效、状态栏,任务栏特效、还有时间日期,弹出窗口等等。 q% )Y  
fGb(=l  
  这里要搞清楚一点,JavaScript不同于JAVA。JAVA与HTML无关,它本身可以单独执行;而JavaScript是内嵌于HTML的。并且JavaScript相对JAVA而言简单,易懂的多。 `23&vGk}  
Y }'C'PR  
JavaScript在网页中的基本结构如下: 8,=Ti7_  
jJ?MT#v  
< SCRIPT LANGUAGE="JavaScript" > &1893#V  
function fun1(para1){ e<YC=67n)  
para1… jii2gtu'U  
para2… t*zve,?}  
} 7xB#)o53  
function fun2(para1){ 511^f`P<  
para1… 7'7bIaJk  
para2… Ud^+a H  
} G%;XJsFGp  
< /SCRIPT > HB{w:  
p*_g0_^  
  function是定义函数。其中fun1,fun2就是函数,para1是变量名,也是传递参数。页面中应用时直接将para1替换为你应用的变量。

阿七 2006-04-04 08:19
下面举个例子简单说明一下JavaScript的结构功能: \r^=W=  
I?J$";A  
< SCRIPT LANGUAGE="JavaScript" > e%`gD*8  
< !-- Begin .sAcnf"  
function imgover(imgname){ ]x:>~0/L  
imgname.src = "pic1.gif"  3Fo,F  
} Au#(g uvm  
function imgout(imgname){ 6|X  
imgname.src = "pic2.gif" z(g4D!  
} "^;'.~@e8  
// End -- > L:%ek3SOz  
< /SCRIPT > o ]2=5;)  
< table border=0 > ^(V!vI*  
< tr > 93kSBF#  
< td > ']u w,b  
< img name="p1" SRC="pic2.gif" width=20 height=20 border=0 > 7 '2E-#^  
< A HREF="profile.htm" onMouseOver="imgover(p1)" onMouseOut="imgout(p1)" >公司简介< /A >  .r[DqC  
< br > }KCXo/y  
< img name="p2" SRC="pic2.gif" width=20 height=20 border=0 > q !7z4Cn  
< A HREF="product.htm" onMouseOver="imgover(p2)" onMouseOut="imgout(p2)" >公司产品< /A > E$ q/4  
< br > oPk2ac  
< img name="p3" SRC="pic2.gif" width=20 height=20 border=0 > QVL9 2"  
< A HREF="honor.htm" onMouseOver="imgover(p3)" onMouseOut="imgout(p3)" >公司荣誉< /A > nFzhj%Pt;  
< /td > KG'4;Z5J  
< /tr > )U>q><  
< /table > PD|I3qv~  
O1JGv8Nr  
  该段JavaScript代码应用于网页达到的效果如图4,图5,图6,当鼠标移到“公司简介”链接上时,前面的小图标变成图5的样子,同理移到“公司产品”链接时也一样。这样就很明确的告诉浏览者他要去哪个栏目。如果你页面中链接间距很小,当鼠标移到链接上没有任何一点反应,此时浏览者很容易误进不想进的栏目。

阿七 2006-04-04 08:19
 这里对上面的JavaScript代码稍作解释,读者便可改变其中的一些参数为自己所用。 GTYGm  
8/-GrdyE  
  函数imgover是指定鼠标移到链接上的事件,imgout是鼠标离开链接的事件。Imgname是个变量名,可以随意取。imgname.src="pic1.gif"是设定当鼠标移到链接上的图片路径及文件名。imgname.src = "pic2.gif"是鼠标离开链接的图片路径及文件名。这里图片跟网页在同一个目录下。所以只要文件名就可以了。下面HTML里引用函数的时候,先给各链接前的图像设定一个名字(p1,p2,p3),以识别鼠标指在哪个链接,如此才能响应对应的鼠标事件。 I=D`:u\H  
5ii`!y  
  可能有朋友会说:这个效果只要运用Dreamweaver的Behavior就可以实现。的确可以,可是,如果有很多链接,你要对每一个链接都应用Behavior,是不是繁琐了些呢?这里运用JavaScript的话,直接在HTML中拷贝,粘贴如下面相同代码,修改一些主要参数即可: d{9rEB?  
b&*^\hY9b  
< img name="p4" SRC="pic2.gif" width=20 height=20 border=0 > !!o 69  
< A HREF="profile.htm" onMouseOver="imgover(p4)" onMouseOut="imgout(p4)" >公司文化< /A > _:c8YJEG{  
< /br > o8KlY?hX  
< img name="p5" SRC="pic2.gif" width=20 height=20 border=0 > j &,vju  
< A HREF="profile.htm" onMouseOver="imgover(p5)" onMouseOut="imgout(p5)" >公司新闻< /A > [9z<*@$-  
… … yHCQY 4/  
cGsP0LkHC  
是不是很简单,你只要准备两张图片就够了。其它的事情让JavaScript来完成。 17$JBQ,[  
n6O1\}YB  
  这里推荐几个软件:“有声有色”、“主页特效制作百宝箱”、“呼吸小秘书”等等。这些软件包含了很多的网页特效代码,有JavaScript的,也有Java Applet的。有一些效果相当不错,可以去网上下载了试试。如此当你想用特效的时候就无需每次都要跑到网上去找特效代码了。 uEVRk9nb  
@ D9c  
  JavaScript可以实现的效果很多很多,你是不是按捺不住了?这里笔者提醒一句:虽然JavaScript功能强大,但还是要慎用。效果好,不一定都得用进去,特别是一些初学者容易走入这个误区,将所有自认为好的效果都用到网页中,让人看了眼花僚乱,无所适从。适当用一些特效代码,可以让你的网站生辉。可是如果你用太多的代码,一方面,会影响网页的可读性,另一方面还会影响网页下载速度。如果为了一些无伤大雅的特效修饰而导致页面不能正常浏览的话,可就得不偿失了。


查看完整版本: [-- 公司建站完全手册――特效的运用 --] [-- top --]



Copyright © 2005-2014 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Time 0.025000 second(s),query:6 Gzip enabled