|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之奇特的文字变化特效
脚本说明: 7 D+ \5 Z6 @! h$ C
9 J# H* P" K F" a" R
第一步:把如下代码加入<body>区域中
6 q* G0 V& ]5 @) ^ <script language="JavaScript">
' ^2 W3 h( R7 k. K. a! j' }3 j( F6 I/ z8 z+ I+ U+ j
function nextSize(i,incMethod,textLength)) a4 t0 P( C* R9 n2 J
{
, M9 x3 P u! f sif (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );3 x$ T( n) T1 }7 |/ [( k
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
9 I( c6 a+ D/ `, Z# D, a}# i7 Q/ P4 b1 o) b
9 l+ ? F1 k+ s9 I$ V
function sizeCycle(text,method,dis)
- H6 S1 N: n/ x3 n{- N k, c" \& D% E: r
output = "";
. E$ _8 B* H& A2 P p for (i = 0; i < text.length; i++)4 |" _* h: n3 g8 F, h: Y
{
; d9 H2 ]0 |9 {% Y; i size = parseInt(nextSize(i +dis,method,text.length)); y6 r$ {/ S/ E" v2 ?6 s! \* h- E" R. u
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";; e# o5 k4 D$ p0 J
}
+ Z @* f2 w& {# D2 ? theDiv.innerHTML = output;
1 P! n% u1 E5 e* \}
) X5 n7 E5 A+ p: ?
6 y c, y8 G$ p( k% A6 hfunction doWave(n)
0 q& n& H& C. ^( Z$ u; d{
) q) L$ X9 I) i8 p theText = "JavaScript";
4 J5 |% B. Y4 k sizeCycle(theText,1,n);
! I: x. a4 }3 |- e* i& b if (n > theText.length) {n=0}
9 C$ T2 S7 y3 \( C3 k" W- P setTimeout("doWave(" + (n+1) + ")", 50);
8 H7 T1 M6 K8 N}
# }) I1 x6 v# Z$ J3 z) c( `</script>7 {. _, @: k1 u7 \' G* F. {/ p
<div ID="theDiv" align="center">7 A4 g" {9 O) y
& h# J) g _6 q7 a6 `1 x
</div>
, n, b8 f- z+ u) q) U' ?$ j
2 S% ~ M, ]0 x* O* n( l, `0 A
4 F- u9 ~6 @- Z) c/ I! _: B' r5 f( C ~0 e8 S3 l
* W$ j _ E p; J* b, u第二步:把如下代码加入<body>区域中<body onload=doWave(0);> |
|
发表于 2008-1-21 20:50
|