捌玖网络工作室 » ASP,PHP,CGI,JSP技术 » 网页常用特效整理：高级篇

admin 发表于 2008-1-19 22:37

网页常用特效整理：高级篇

笔者日积月累了许多精彩、实用的Web特效的制作，这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。_ nG,W!q
d+]Da'PP }2T4H!MW(|
　　高级篇y-]b8A%NF
\r8S
0q'k.~4g3U{EqR#IN
　　1．不同时间段显示不同问候语
e] J0RJL|%p#JM "} `$wX'F)_+R n_
　　3R.X7vb9^m#d
9q;z1FQ"eU
　　2．水中倒影效果
"oV il&h!W
(@_2]q$ul 　　＜img id="reflect" src="你自己的图片文件名" width="175" height="59"＞
lY
vH9B'W@ 　　/NRL{4G a

v;P#y!rY
s)GD;NY 　　3．慢慢变大的窗口
K"a(cNHr-V)UW/U
,m2J.Q5f?z Cn 　　
.M:FJ%|([o'vL~r 　　＜p＞＜a href="javascript:openwindow('http://89w.org')"＞进入＜/a＞2J1W9R.nthN
cVE'g+h._E
　　4．改变IE地址栏的IE图标
"h @T
y9G{*k`
R lwu)ZPErHs v 　　我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：x6{3{z RZ`u;T

^}3@(r,Q TS'q&M 　　＜link REL = "Shortcut Icon" href="index.ico"＞O\b@T:F
5．让网页随意后退
O"g._$gNN&Y UNV
2@
E_DY`3X+k 　　＜a href="javascript:history.go(-X)"＞X＜/a＞ //把X换成你想要后退在页数
EnH(?VG
ig 　　         //把“-”变成“+”就为前进;g NDA|o"K{[O

S*W%dl%bGu3Q4}N2? 　　6．鼠标指向时弹出信息框Eu+t3Ts ZZG
h? E&t8V
[v$um+W
　　在＜body＞＜/body＞之间加上如下代码：
BuHM'El7VNt
swi9@ C k:K+xEH;x 　　＜a href＞显示的链接文字＜/a＞.v o;oO [d`%_H
ER;lh6{XkE
　　7．单击鼠标右键弹出添加收藏夹对话框
:b"r^'GZ[ IgA$M:K{"^y
　　在＜body＞＜/body＞之间加上如下代码：
g
? N bg[t@m (M%b1X8_~_
　　
e8E.]oZ p @2~.a6V$j9~
　　8．随机变换背景图象（一个可以刷新心情的特效）-md-YI1cOjG$SP5j
)ICo:@I7s5\xx+A
　　在＜head＞＜/head＞之间加上如下代码：
ez0fU1FR
O-UB;m H0V3IR%j 　　3O g F xt

8ZN0?$dh+dxYV 　　9．鼠标一碰就给颜色看的链接;F*JPjn.P"~
/H0gy"S&O,Bo
　　在＜body＞＜/body＞之间加上如下代码：&OP1@6n~ S

"A/n
k;{x 　　＜p＞你敢碰我，我就给点颜色你看！＜/p＞W1qQ?J-^E?dW
　　
2P imJ3D;GK%I(V@9Z
D*Q;vE(?rt;{ 　　10．从天而降并有幻影效果的窗口'aZ!E6weZ
kBL N)z
　　＜head＞$| Gfk!N*f'y(~\)_Q
　　＜Script language="javascript"＞
/|(U@G ] a3Z 　　function move(x) {@c'HV:fnx
　　if(self.moveBy){
VC T'xC
A!`}c 　　self.moveBy (0,-800);6J$B!i ycX
　　for(i = x; i ＞ 0; i--)
mB~[z#q9Y.r 　　{']_-Z,zJ(R IkpzD
　　self.moveBy(0,3);
fJ5N;M1XTl 　　}r#m*eE*B$?_x
　　for(j = 200; j ＞ 0; j--){  //如果你认为窗口抖动厉害，就200换成个位数2Bb ]wS2O
　　self.moveBy(0,j);
5UD/u!i3X$m$| \UFZ 　　self.moveBy(j,0);
'`F].A)Xf@ 　　self.moveBy(0,-j);
a,oG}X-j)Y
y+@,] 　　self.moveBy(-j,0);'NGr0W [
　　}-HGj0fmu
　　}
]
bZ0R3s+Hj`/| 　　}
tR;BT,LSN 　　＜/Scrip＞,[_k2K1D.~Jd1x
　　＜body bgColor=#ffffff onload=move(280)＞
.f8S6dP,?6d'~ 　　＜/body＞
Q7Wvf+_ 　　＜/head＞Y.n,@;R?
^o6aZ#xH MK
　　11．表格的半透明显示效果
9d Zl!P"L{vJ?p
]p-aq,\Mi)k 　　在＜head＞＜/head＞之间加上如下代码：
^Zp*p
{
D1M]\I 　　"Cx`5s9A
7}L0I.Yp'F WSulNJ
　　在＜body＞＜/body＞之间加上如下代码：
S&s*lb}h 　　＜table border="1" width="100" height="62"  class="alpha" bgcolor="#F2A664" ＞
t1[rE]GhM'N.a 　　＜tr＞6Rd'm To#FU'i
　　＜td width="100%" height="62"＞o/c5TZ?s
　　＜div align="center"＞很酷吧!＜/div＞
e+vv,H;pU(A 　　＜/td＞
ml t
xM'Q:vG 　　＜/tr＞
m y0@+t6h%jx,uG 　　＜/table＞

查看完整版本: 网页常用特效整理：高级篇