<html>
$ |. c" o. S6 ]2 \- G1 v8 J
<head>
3 O0 @/ V7 I- B9 x1 _7 W* o<script>
! v) H# Z3 f' d6 q9 C+ o/*
* h8 ~5 A$ ` P& X
By Auntion
+ f/ z+ G+ o( c# y7 u
QQ 82874972
1 c2 U1 W) h1 X+ S5 I* e) l7 J; p2 e, Z
% v2 _" t. L2 ~! B t& r) |6 D' J
使用方法
/ t. k5 @% j$ m0 l$ O调用效果: Effect(1,2);
! E# Z8 x7 ^& ^& L. G" K9 G/ T5 s, @& _其中1为: 被改变对象的id
* \/ C$ _* f+ i% c8 s
其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id)
* v. u( c8 G8 V/ [' i
4 u! r" P) w9 i% X" d. [7 @# P注意给对象ID的时候一定不要重复.
1 G# h o# }$ H( k/ o! a5 a4 X*/
! Z9 G& }1 c7 ?! [1 Q
' b4 V2 I9 ~4 E b( Yfunction $G(Read_Id) { return document.getElementById(Read_Id) }
& r+ m" `# {! o9 c; K; G7 `
6 u- V& \. t' M d* Wfunction Effect(ObjectId,parentId){
~( }9 r8 `- G0 d- M7 `; E
if ($G(ObjectId).style.display == 'none'){
, ~8 S! b" z+ n5 S5 w
Start(ObjectId,'Opens');
+ g: g! h/ w. B; i) J4 a$G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭</a>"
; n' W9 V4 m# Y! g9 e
}else{
% t% N X2 O+ WStart(ObjectId,'Close');
$ {' H$ Z5 J/ i$G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>"
% e" l' i- T* l0 v+ J7 c, A7 ^}
+ A/ |2 d- O* @5 p+ k7 p3 f% e
}
# B0 t9 @6 ?: Z1 n# R4 h6 _9 r& N- z+ s' w& x1 c# I
function Start(ObjId,method){
8 ]/ Q) }" G4 V& G% L1 G; R
var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度
9 r/ C8 B" B# l: w' Q4 Dvar MinHeight = 5; //定义对象最小高度
* A( }( P" ^& j i: Tvar MaxHeight = 130; //定义对象最大高度
/ [: \! @6 \7 w$ o$ G* E8 lvar BoxAddMax = 1; //递增量初始值
8 u2 N% Z) X8 R8 o7 Q
var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快]
! y5 f. z7 C; G! `* T" N* a
var Reduce = (BoxAddMax - Every_Add);
9 ^; [- M9 a+ A9 W' _var Add = (BoxAddMax + Every_Add);
8 ?( K) J$ y3 W* h/ k j0 @9 n5 v) x8 r, a
if (method == "Close"){
. R9 E# {) ?) `+ r
var Alter_Close = function(){ //构建一个虚拟的[递减]循环
# B9 v4 o* P1 J- g6 j8 e+ xBoxAddMax /= Reduce;
( O: C6 V: \! O1 I9 R, \: TBoxHeight -= BoxAddMax;
5 J8 Z& X0 [* w+ H8 |if (BoxHeight <= MinHeight){
9 H; n' E) L! k( |, a6 d' w5 ~
$G(ObjId).style.display = "none";
. c! K7 y0 d: s
window.clearInterval(BoxAction);
$ w, d" T/ n7 t! _2 r! t, d8 v}
& S0 |+ A& N/ o8 s% W& b$ A, ^
else $G(ObjId).style.height = BoxHeight;
, O; ^( W& @ L& p5 D( [$ V/ g}
8 p8 N+ I1 p" X3 f8 Y) C. P) |3 J8 W! Gvar BoxAction = window.setInterval(Alter_Close,1);
9 `+ s, @) b- h/ d$ K
}
% x* ?8 I1 a' d7 N, z/ F: U- o/ [/ A( c1 l
else if (method == "Opens"){
. o7 j. \; V! Avar Alter_Opens = function(){ //构建一个虚拟的[递增]循环
8 x5 L3 O- p; z: |6 hBoxAddMax *= Add;
/ i" u* z! c+ @1 Q8 f1 fBoxHeight += BoxAddMax;
, \1 E2 a0 L/ d' k3 M
if (BoxHeight >= MaxHeight){
: y2 w7 O1 Q3 |9 r
$G(ObjId).style.height = MaxHeight;
% c& w m" }1 P5 v3 T; G9 [ window.clearInterval(BoxAction);
; w9 ^% w" G2 T% V: l
}else{
& P- y8 ~" k$ ^' t! }$G(ObjId).style.display= "block";
1 \% G. U6 y n9 S" v* d: l5 w$G(ObjId).style.height = BoxHeight;
$ |! N* D* S/ V$ ~+ Z. @# e; w}
% C9 W6 m* W* Q) c, A' U. I# N& ?$ P
}
* s* @+ A K* Z1 [ b
var BoxAction = window.setInterval(Alter_Opens,1);
+ p; ?, p( @: x6 ~}
) H" v ~/ V$ a. B: X. R; t- e# b. t5 v" h+ p
}
' H5 r5 b, C4 j) w* ?9 P5 I* v
</script>
) e* ^& S" D {2 k" p; t* ?
+ l# g+ A- s ]) B; W+ G e<style>
1 n$ ~$ O( S" }3 f! U1 o0 f* G0 |# l+ D
body,div,table { font-size:12px;}
7 ~+ L, a2 w& S) t#control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; }
# p# }7 F v9 Q6 `; }#control a { font-weight:900; line-height:30px; color:#333333; }
$ J# H. H Z" w4 ?7 e
.test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; }
7 H4 p. A7 X: G- n7 s. n
* z E: s* q* c; p
.STYLE1 {
" t" I7 t) @* y. |1 H. n
font-size: 8px;
6 E: x( w' E4 l7 @6 a
color: #FFFFFF;
1 e1 k1 q, O5 p* o3 M3 [}
8 h, t T. ~ x% f- W* C
</style>
3 _! G2 A& Q8 U</head>
" t- B& a! T% s' F+ }
0 r7 h& X6 r$ Q; M+ K0 p<body>
; j# t2 f4 V$ H0 W4 `4 g4 ~<div id="control">
- O0 {6 |/ }% c7 ~. E! g+ l8 l4 d1 E
<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
+ R6 {; n+ Y- `% R/ p. m' N$ b$ ]
<tr>
; K1 H. m k0 j; r6 H9 N: Z
<td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onClick="Effect('test',this.parentNode.id);">关闭</a></td>
$ C3 k: Q0 y$ P+ q! A# |, M- E* g
</tr>
! B$ m7 A+ S0 Z! h4 f! s, u0 ?
</table>
; p* D; j8 {8 c; j. a' S1 Y' H</div>
6 E6 C9 M, S1 }; m! ^- o$ W9 b<div id="test" class="test">
; S$ a- W* i- o1 f* R, h<table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
6 n& e) D5 \1 E' i$ i; p$ b0 s <tr>
/ l* J+ F" d) F# ?* D4 [
<td colspan="3" align="center" valign="top">这<br>
% g' v" n( Z) l/ U( a+ [; C
里<br>
6 w) j9 o1 } h! ]6 Y4 w- [6 I
是<br>
9 M+ d; C7 G8 v: m/ D4 H
第<br>
0 u3 W( B5 ~1 U4 F
二<br>
9 q+ {- Z. s, z6 U/ a5 J7 |
,<br>
# V. P7 g b: Q, y2 i
很<br>
, e9 N6 X+ k8 q# G$ X# W: K 正<br>
- \" J' y; `' Z% i2 f 常<br></td>
8 {5 r* `, I8 v# i
</tr>
9 f* n5 H5 t7 s; g</table>
7 O6 }( ~. u4 O7 Y
</div>
. M; a$ e+ n4 V) ~1 x2 j" K0 W<div id="control">
4 l% I Q3 R+ C" S3 E8 g8 W# q g
<table width="100%" height="10" border="0" cellpadding="0" cellspacing="0">
# x) u% m/ S2 e9 W1 S <tr>
: z( W3 C4 O& y- c( R. G- ]+ j <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td>
- R0 [1 A H0 q8 J4 d
</tr>
' s- {% k8 u3 E$ q5 w- G) Z7 R# A0 @</table>
1 v. z/ D- @3 W5 W: V& U5 B
</div>
0 I. \! M* }$ S7 S4 s
& X4 A3 n* `; v- c0 f) f- V
<br>
6 |) _0 [6 [$ ?. d* E4 A8 }1 y) M) @
<div id="control">
3 T, @+ S' h, u; B+ S; {: s
<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
2 E( g T6 h( V& ?, w8 [' Z
<tr>
9 S/ n. f) l) o8 T! B, A
<td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onClick="Effect('test1',this.parentNode.id);">关闭</a></td>
3 D& r' b1 m7 u; R" Z9 M: A% y
</tr>
$ ?5 }- g9 X3 ?6 K+ m2 [
</table>
9 g- @! M7 d% u
</div>
' ^6 E3 D6 |) ?
<div id="test1" class="test">
1 Z' I7 x: q4 B- X& q9 _ ]
<table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
* Z2 Z: x! `9 [; c. r
<tr>
" f0 e% O: ^, C
<td colspan="3" align="center" valign="top">这<br>
: d, c; x& _' V# n: I# J. x" Z 里<br>
! {: a g+ U# T5 a! x 是<br>
- m/ t+ c4 T6 C! T6 E- r8 D" V
第<br>
' v# c( H; f8 c+ `2 b) k% ] 一<br>
i4 t1 W* m! E3 q! ]2 K
,<br>
, A9 \1 w# c; m% {) _+ S- G 很<br>
( A' P: ^1 G2 d( n$ j 正<br>
( K) r, r6 e4 S% u. L 常<br></td>
3 Q0 o/ D4 h6 {9 p8 ^: d1 P </tr>
7 a' J0 Y O7 k3 t5 h
</table>
6 r. J$ @* S: x" A; N6 U+ F3 B
</div>
1 ]& T: \% w5 r) U
<div id="control">
% n0 J/ \0 |; P3 B' a- b<table width="100%" height="10" border="0" cellpadding="0" cellspacing="0">
$ Q7 d, ^1 n2 g! |1 L <tr>
- }5 W; c/ j! B$ m* h <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td>
9 E& ?) o( c, r3 z </tr>
4 e( P2 ]0 a/ @</table>
0 Y% g8 w! [! |5 f* d</div>
8 l' d3 l- P$ n8 k) F C</body>
* ]. A' i& N1 T
</html>
