标题:
网页常用特效整理：高级篇
[打印本页]
作者:
admin
时间:
2008-1-19 22:37
标题:
网页常用特效整理：高级篇
笔者日积月累了许多精彩、实用的Web特效的制作，这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。
/ `( s5 _; i. b5 U& H$ v" x& n) y7 @
5 u) P. ]" M( X: O/ _; p, V1 ?
高级篇
" v# s3 A0 w$ C5 Z6 Y" ]! @6 I
; G- k2 e7 M! @$ c9 l) a3 S
1．不同时间段显示不同问候语
* M6 r5 p6 B- y; b& D) {( O/ g
; y$ Q- N }" h4 h/ g
' k! e% F- y0 ]
: P7 w% H- F% v/ r) l4 n+ i* @
2．水中倒影效果
7 B! t% D6 x2 g; G
2 U! J) D3 l0 W: e( Y
＜img id="reflect" src="你自己的图片文件名" width="175" height="59"＞
: M) |* C, L1 Q, ], u, g5 f- q: y; `
4 v+ m+ C# I0 I/ M/ i
8 @# Y8 u8 n, h$ a3 K; v
3．慢慢变大的窗口
# B5 g. `" @! a
: z9 j# a8 u1 s! C; [/ C% R* |9 c
* O2 n1 }0 g% I& b1 C+ L/ ?0 ^" r
＜p＞＜a href="javascript:openwindow('http://89w.org')"＞进入＜/a＞
: T: Z: F( p7 E! p- N
9 _* Q) O0 H* |9 ]: O
4．改变IE地址栏的IE图标
- m4 d& c! t e& B: J
0 ]% g6 }/ O% b
我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：
( N& r1 X4 m3 o: P, h# c6 l" Z
; ?: r6 v# X( j# a" s& b
＜link REL = "Shortcut Icon" href="index.ico"＞
+ q' Y* j* e8 @( y( L: H1 Q
5．让网页随意后退
1 ]" V& J9 k+ Z. f6 X: Q0 X6 \' L0 {
3 v* I, D5 S* m/ o. ?
＜a href="javascript:history.go(-X)"＞X＜/a＞ //把X换成你想要后退在页数
" @6 l# D' c! i
//把“-”变成“+”就为前进
# R/ ?$ @: Q1 |9 y6 @% S8 v$ `6 C' L
7 c3 x; k( r! s
6．鼠标指向时弹出信息框
" z. V( L; P. D
. N. f5 \9 o+ C: S0 X2 `' K
在＜body＞＜/body＞之间加上如下代码：
5 q/ ?) a! @- H; r
2 W6 K' ~( e+ ^1 c+ p5 ^3 T
＜a href＞显示的链接文字＜/a＞
& d5 }, d; ^# k1 l+ d
+ k8 |; k! r& z E. O: M: \
7．单击鼠标右键弹出添加收藏夹对话框
2 }+ o1 t+ n8 l: }4 [
1 r) b: M& w. h7 }' q5 ?
在＜body＞＜/body＞之间加上如下代码：
* X% G3 ?* c: j; s) ]
$ R" l8 W4 D7 ], r, g
/ l0 q) I: D' h% n2 H/ v! L
/ y z$ ~4 L# |+ k
8．随机变换背景图象（一个可以刷新心情的特效）
0 n5 s1 L' G- @3 V
$ S" W" V5 H' X0 p* V* S
在＜head＞＜/head＞之间加上如下代码：
0 e$ f) G1 g, N" n
& J. q# k; K2 K1 F' e
* w) |! O; X" O9 u
$ n1 h* \4 z# F6 W$ G3 f/ O
9．鼠标一碰就给颜色看的链接
3 B" S0 X; F f. @8 f9 e8 M! x2 ?
' {) ~* N$ ]- e. k% I
在＜body＞＜/body＞之间加上如下代码：
, `1 K+ M" S# \0 n* I' x/ B ?, [
( R5 m* ?2 n" v2 N" K! r
＜p＞你敢碰我，我就给点颜色你看！＜/p＞
) h3 B6 \0 q7 E& c" t: u
7 c- s7 c1 L* }7 |* \0 g1 G
* }- e) L7 d0 X: T$ q" z
10．从天而降并有幻影效果的窗口
& z/ e9 y. Z- t5 f }# l" y! j9 ?
0 P R( p& [ ^/ v3 D
＜head＞
. _' Y% z* M" n2 J# d
＜Script language="javascript"＞
+ a8 {0 t/ q+ e1 W0 Z8 o
function move(x) {
4 b( i3 G, S" S( O0 @6 ?
if(self.moveBy){
- a0 d: o1 ]. e% x8 o
self.moveBy (0,-800);
' [# H: E. O. V! U" C+ B- t% s* @
for(i = x; i ＞ 0; i--)
4 T5 ]# r9 n( P7 G) ~; F0 ]; ?" {
{
9 p0 h5 g/ o# f- ~0 c* v# g
self.moveBy(0,3);
9 M# u( w( v: r/ b/ r8 a, v: l
}
5 v% M( p! @$ W5 L& y, h, N
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
, d! ?, v S3 i# M6 P* c
self.moveBy(0,j);
" X" `- o8 \ x9 t+ ?
self.moveBy(j,0);
; C1 Y# m# u! G% d% W& }: _ b
self.moveBy(0,-j);
( ~( E) C- h1 ?, |' M1 l
self.moveBy(-j,0);
+ x7 j0 R! f T# l4 }* k
}
6 j3 d3 u5 Q" q" T- \( j" E. e
}
* @# N% Z% X% a
}
7 Y" I0 \5 c3 |$ z7 |
＜/Scrip＞
. E9 Y2 v. {# u4 l$ R7 L
＜body bgColor=#ffffff onload=move(280)＞
; N9 k. I8 M/ D$ @
＜/body＞
3 s: Y( S) H: O
＜/head＞
8 V$ I# }& `- l" \' m: ?
- k4 Y M% V7 e6 G4 q( @
11．表格的半透明显示效果
# ~* S; C6 L, J% ^9 Q
! X' {9 ^6 _5 @& F; c, h
在＜head＞＜/head＞之间加上如下代码：
4 p0 H/ I" {) j0 `2 y3 z2 q# B
* ^/ q$ c" `% n
. Z# t9 U2 J, j. _4 T( g
* y% D S& e; l! q: n* f7 N
在＜body＞＜/body＞之间加上如下代码：
$ V* q; N& m' m. g/ `1 X
＜table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" ＞
6 x8 |# z, X2 L. y7 i; P1 K* K; Q
＜tr＞
/ A( r! A; h) h* j3 ~
＜td width="100%" height="62"＞
( a4 F: z# k! s7 `; k
＜div align="center"＞很酷吧!＜/div＞
8 i% y& Z/ ^/ `1 D
＜/td＞
4 f9 o; O4 r; i+ n
＜/tr＞
" w0 Q$ a; z. M5 o5 o2 }( n! H4 Z
＜/table＞
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
