|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之奇特的文字变化特效
脚本说明:
# ~6 d3 i! x; M/ @9 w 0 e: F$ T! U+ S# G5 k
第一步:把如下代码加入<body>区域中
; Y3 x E) m4 e" ?7 R: U+ Y <script language="JavaScript">
7 b$ f) g4 z$ G$ C1 P6 `6 o3 {! b/ F% Y* L
function nextSize(i,incMethod,textLength)
3 w x; X1 g5 K9 A+ h, o7 ~2 C2 U{# h$ _5 F! h7 `
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );9 v1 K9 p1 y1 B, t
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));! D& b0 o4 a! j( P, W7 m
}$ E9 z8 N1 x. I4 s: K5 |9 U
# j9 r! m) \+ E4 m1 hfunction sizeCycle(text,method,dis)! H1 u5 R u9 i9 |6 Q
{, T) r6 m9 t* X& n9 r# q i$ g; a
output = "";
" M8 J3 d4 R* c! Q! ~ for (i = 0; i < text.length; i++)" W4 G7 x, v/ M5 ~8 s B9 M+ }
{% X! e6 I: J7 ~/ V6 C2 `
size = parseInt(nextSize(i +dis,method,text.length));4 z2 x" K! ]: [( }4 z9 `# E- L- d
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";0 ~0 W% q2 e4 ~$ J9 g/ Y: c$ T) S4 {# Z
}
' F( n, ?: |9 N; F$ [7 c5 K2 T theDiv.innerHTML = output;' Z: q; u1 P5 Q9 Y7 y( o
}( l' K! T' e: v% S
7 {3 |1 p. J3 v* ?4 E0 k1 q" ufunction doWave(n) 4 E: |7 R6 Q4 I
{ 3 b+ A+ R8 K% v
theText = "JavaScript";
0 R1 i! f. G; B3 g sizeCycle(theText,1,n);
: {; F- [/ c+ p/ ]3 u% h5 ~' n( g' g if (n > theText.length) {n=0}
6 X- k% X3 s9 N+ r: h setTimeout("doWave(" + (n+1) + ")", 50);
4 J3 n+ x+ g; L+ ]7 a}
: s3 p9 L# n6 N( w) M4 W: B$ c</script>
: G9 A' ^5 R' X9 C0 p$ ?<div ID="theDiv" align="center">
. M( x3 p5 t+ K
/ z" I5 [, Z1 @+ }- M</div>- F0 O; g: X9 H5 @5 {9 d$ N
" N" t5 N; I6 s1 r$ m
1 }7 j& E& ~" Z; j4 X2 r+ { w* m+ v) \) G( R
4 @( ^9 }$ o0 q$ y第二步:把如下代码加入<body>区域中<body onload=doWave(0);> |
|
发表于 2008-1-21 20:50
|