|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之奇特的文字变化特效
脚本说明:
$ S' A7 h- m3 q: B
- ?1 e6 r" U3 O0 c第一步:把如下代码加入<body>区域中3 E1 M) z/ @! @' |
<script language="JavaScript">
0 A; @% X3 n6 ^8 O0 `
& A9 h( @0 Q1 w7 Afunction nextSize(i,incMethod,textLength) Z Q+ N" ~* ~, {
{4 H$ G2 \2 O( v1 M% ?- E# h7 Y' o$ P- x
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );( S1 I/ U6 Q4 j& [4 D5 Z6 Y
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
. E9 F7 ^# L0 U; [; m* T}& U% T& y& P5 b3 P0 Q
. u, j) ]6 p' f6 W) I/ ]4 [function sizeCycle(text,method,dis)% p2 w* T) D7 h5 E6 `& {
{
, J' _2 F' s; e) i7 A output = "";! x% Z4 W0 N6 x0 e
for (i = 0; i < text.length; i++)
4 R9 w: L2 u c8 J {6 p; E. M+ N! \) M- ?4 w$ Q& i
size = parseInt(nextSize(i +dis,method,text.length));
: |1 S {; }$ @: ?* { g. D output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";$ A' S( e7 z k
}
( L+ ?. T0 q' G: x9 S8 `# G theDiv.innerHTML = output;
5 u5 w* X7 k& b7 o) q7 T% k}
& v. O5 D5 o" p& I. J+ c$ Q5 w: I5 q9 y% [5 w
function doWave(n) 6 _* Q( ~2 k3 v I1 o+ G
{ . w' ]5 C- g% s4 F$ B7 \- a' m
theText = "JavaScript";* A- i! o: k$ c& a% k& s+ c
sizeCycle(theText,1,n);
+ j( \! E. t- Z, p' ?) H3 N; M* J if (n > theText.length) {n=0}
9 C% J$ I& @4 o& e' y- f) U setTimeout("doWave(" + (n+1) + ")", 50);4 f" M% ^0 |6 J2 Z6 n' c: N
}
) n/ n' y' R( J. ?3 P* a) }, T</script>
/ i1 x0 [8 a7 ]<div ID="theDiv" align="center">) T- K0 A4 ^# ~
) }$ g, K: n: `3 O
</div>0 H# g9 s9 r4 R$ P( {
& D, v8 m; l/ w& b/ I
) Y7 S% i" ]( x5 l. R3 U% w5 Z2 f) S
& H, e8 \. q7 E. F# p: F6 s' [0 |第二步:把如下代码加入<body>区域中<body onload=doWave(0);> |
|
发表于 2008-1-21 20:50
|