发新话题
打印

使主页呈现“飞舞”特效

使主页呈现“飞舞”特效


朋友,“天上掉陷饼”都听说过吧?呵呵,陷饼它算个么,今天教你一个天上掉¥的招儿,并且~~哗啦啦地掉!哈~哈~哈,来吧^_*
  r+ P1 s: ?4 y; {# f& U
* K" x; v  v. C8 [" i. ~! v  首先看效果2 s3 V: O. Y. j% E3 A

/ N' J3 C4 X& e7 v* h2 A8 K将下面的JavaScript代码加到 head 区就成了:! D* Q$ x4 E' s! L) Y2 K& m

0 M: E! d* V  Z& Z/ l: c, g2 @$ i- F7 K1 H( x7 ?3 F+ n1 x
Script Language="JavaScript"
8 g! E# q+ d6 p0 {# D* r& i: I# B7 S !-- Begin) u& D( N# f8 _( H
var no = 30;8 _( M% x/ R) C! v! v
//设定下落字符数量, k7 _& S8 |; Q! N5 O6 b4 I
var speed = 5;9 v$ z- ^) I0 J# T
//设定字符下落的速度
! J- U1 o$ J3 A: j$ q# Z! k4 vvar ns4up = (document.layers) ? 1 : 0;
& m0 U9 G4 J! n/ S/ n6 Z5 ^! D6 Hvar ie4up = (document.all) ? 1 : 0;
3 d' |& d) s/ [: d; q4 @//NETSCAP和IE两种不同浏览器各自进行定义$ O% R  l+ G: F
var s, x, y, sn, cs;
" d( A* w* |( C% }$ [  S( I2 Wvar a, r, cx, cy;; @( N# E" Z% t5 x
var i, doc_width = 800, doc_height = 600;
+ `  i- w7 m$ j; z//设定字符下落区域为800*600
7 U( P1 G5 g5 b. J5 M, wif (ns4up) {
9 [4 O  I" G( o! e1 _; Ndoc_width = self.innerWidth;- L& _7 {' n! [2 m  s3 \
doc_height = self.innerHeight;: x7 s# ?& F: Y/ L
}
+ e& k3 h% R% [3 Q, r+ Belse  i" a' c/ l0 ]- ]: ^  O" b% h
if (ie4up) {$ ?; R6 [2 g* r: `* x; v
doc_width = document.body.clientWidth;4 p2 @+ P  n2 ?3 D
doc_height = document.body.clientHeight;! n: D' R0 p$ [  a# p
}
. H0 w& ^# t9 Z' j- P//NETSCAP和IE两种浏览器有别  r. i2 P. ~+ |2 r2 ]
x = new Array();
0 B) |6 |9 Q" U" M/ {7 gy = new Array();
+ D6 I: S0 R, X+ j* zr = new Array();) m  |" P; F- U- T6 ]
cx = new Array();
) |! Z3 B& X* J/ u& Acy = new Array();
- q& \) B8 t, O0 y5 Js = 8;! {  W$ [3 @; f- ]' j
for (i = 0; i  no;    i) {
3 j: q2 k4 a( p$ F' IinitRain();
' g. ^! d- m) c# n9 b//定义变量数组x, y, cx, cy, s
1 |7 I% u, x, p* `7 Zif (ns4up) {
% v2 [- e% a2 Q, tif (i == 0) {
) x0 w4 t* R3 N, G+ k" z" a- t5 udocument.write(" layer name=\"dot"  i  "\" left=\"1\" ");
% T: R& |+ \+ K2 I* |' k1 d' ^document.write("top=\"1\" visibility=\"show\"  font color=\"white\" ");+ i* U$ k  @* E  b- G! j* r6 i
document.write(",¥ /font  /layer ");
; c& M8 ?0 k! J* b1 z}9 _. T3 |9 L' k. s& e. G$ C
else {
9 K4 f' f  |5 @- w. l; M9 wdocument.write(" layer name=\"dot"  i  "\" left=\"1\" ");- ^5 ]% ^+ D, B0 c
document.write("top=\"1\" visibility=\"show\"  font color=\"white\" ");
7 @- P0 ?1 \' Z8 C* bdocument.write(", $  /font  /layer ");3 J- {0 d2 P, E9 l
}
+ P4 |& O( v* y5 J0 M}  `( V# B4 C, M* [6 @
//当i==0满足与否时,NETSCAP中的表现, {6 s7 ^; ?# _+ x& U( I7 a
else3 w! c5 \2 b, D/ o
if (ie4up) {
6 _$ |2 N8 c4 @1 Kif (i == 0) {2 V* x) f& X, D" T; V# K# H/ O2 t" r
document.write(" div id=\"dot"  i  "\" style=\"POSITION: ");( \2 x, x. J+ ?; ]
document.write("absolute; Z-INDEX: "  i  "; VISIBILITY: ");* ~3 b8 i/ w7 j& [. J* Z- Z2 N
document.write("visible; TOP: 15px; LEFT: 15px;\"  font size=\"10\" color=\"white\" ");
7 {; N. E) |0 J- Vdocument.write("¥ /font  /div ");/ z- u- y6 @! @. k! C+ q
}5 N2 y4 k8 j9 Q4 x/ a# M
else {
. U1 M4 ?' j9 H  ?2 Zdocument.write(" div id=\"dot"  i  "\" style=\"POSITION: ");5 m  a* `: e' I' e
document.write("absolute; Z-INDEX: "  i  "; VISIBILITY: ");
: J, E% g; O! O7 ?document.write("visible; TOP: 15px; LEFT: 15px;\"  font size=\"10\" color=\"white\" ");* F1 i% w7 ~/ H9 Y  x8 P5 H, u+ ~
document.write(" $  /font  /div "); //设定要下落的的字符(¥、$)及位置
& g8 `* @, V) T, N2 w1 p}8 s# _4 j/ \5 l
}3 |  K: s* Z) v
//当i==0满足与不满足时,IE浏览器中的表现6 U" `5 Y6 F' A0 M& z
}
1 R+ ^- D8 I5 L% B6 |function initRain() {
  G+ H- d# K6 d. Na = 6;
9 k; }" x+ s" vr = 1;! {' L# p7 Y; O4 O* `* A8 O
sn = Math.sin(a);
* ?- j2 @. o% @, {cs = Math.cos(a);1 E& H) R. L0 Z& h0 D1 l( `
cx = Math.random() * doc_width   1;1 q3 f3 b' _6 J3 U0 c4 O
cy = Math.random() * doc_height   1;
2 O) A- t3 U& `: I: [5 [, l* Mx = r * sn   cx;
5 M; _2 c4 a: [5 Dy = cy;! Z9 z8 B+ w) d
}
% n; F: N+ k" L( n- a) ~) [5 C  Hfunction makeRain() {; c3 z1 z4 x4 v8 X9 K6 ^
r = 1;$ z* b% U- Y/ ]: j
cx = Math.random() * doc_width   1;
+ w: D  I, J3 qcy = 1;2 ]: H1 g4 k$ J% ~
x = r * sn   cx;
. c- K/ m4 O$ T+ h8 ny = r * cs   cy;
2 i6 Q8 ]# w; O  ?: r}5 y# }$ ^# f. q( `
function updateRain() {
  V+ k- G- z3 W! ?r  = s;
3 _8 O% S! o  m+ U7 N' z: Wx = r * sn   cx;9 c; t" v5 g* M: B
y = r * cs   cy;
; i: ^: H3 T  E+ T  x9 j( H% n; q}5 _8 C. Y& e# {8 Z7 O
function raindropNS() {1 U, X# r3 }6 g- p/ l* `) j: ^) e$ s
for (i = 0; i  no;    i) {
% y. T( G3 q8 d+ R2 b% z; _updateRain();
* _8 L( X9 I& e, t: d9 `//定义变量数组 a , sn , cs , cx, cy, s
: q" b. R$ o4 C5 {# h: O; h) vif ((x  = 1) || (x = (doc_width - 20)) || (y = (doc_height - 20))) {; A" I6 f1 n) o3 n- b- K
makeRain();
4 Q9 e- _9 y9 ^* Xdoc_width = self.innerWidth;2 ]3 @2 a" I  @3 ?, s
doc_height = self.innerHeight;
$ O2 L0 W# {2 a, s( u5 [; N4 ]}! t9 S4 ?2 ^/ e- {( _
document.layers["dot" i].top = y;
3 I: p2 P3 b' i4 X! adocument.layers["dot" i].left = x;
6 I) B# g& i9 ]4 L}- E6 K/ J- \4 a0 R8 t+ J
setTimeout("raindropNS()", speed);
3 p" ]1 |+ ^& W3 g}
1 T* N9 H. r8 I- W. cfunction raindropIE() {
; d& m' Q7 p4 Zfor (i = 0; i  no;    i) {
2 v/ C; K9 ~: u# a! y. X0 R* `. PupdateRain();  K$ F; t9 r8 D  f5 m
//在NETSCAP浏览器中的付值过程
  t# z4 @2 i$ L6 n1 b* Jif ((x  = 1) || (x = (doc_width - 20)) || (y = (doc_height - 20))) {
/ l0 i6 a; j0 P7 a2 JmakeRain();$ h0 K- }& r, B" j% \, P: J; X
doc_width = document.body.clientWidth;
/ ?4 f/ A  [: |( W7 udoc_height = document.body.clientHeight;9 i. x0 b( k, j& \& l* ^1 h
}
! ]7 L( q' s3 I* Y3 E' A4 odocument.all["dot" i].style.pixelTop = y;
* C- B) v5 g, _1 Y/ fdocument.all["dot" i].style.pixelLeft = x;/ f& a+ T4 J5 G
}# t% u/ a$ L) f: _
setTimeout("raindropIE()", speed);" K; X1 I- P% d
}( S9 g9 B3 Q* |" r$ [- j$ \
if (ns4up) {raindropNS(); }, u2 U: s* d( G% X# f* M8 N7 ]. l
else3 |9 C2 y# j( x& T
if (ie4up) {raindropIE(); }6 `& J6 y0 W( M. S& A! v6 e) W+ i. l
//在IE浏览器中的付值过程
8 E. z' i. s* L0 u; \// End --
& [( c- Z. _9 S /Script



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题