|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之奇特的文字变化特效
脚本说明: $ D3 T' _1 I0 J# z$ B$ ~) u q
* r+ ], u( f1 p7 \: `
第一步:把如下代码加入<body>区域中+ O; w8 M5 S+ `
<script language="JavaScript">3 o4 O- w+ {" r5 |
& {/ j5 i1 T- `
function nextSize(i,incMethod,textLength)
. Y. v! d4 r6 R+ x7 R2 g{
8 Q, M# J, a& W$ vif (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );2 E5 v6 W: M# L& o
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
6 O: v& s$ f& v$ x5 d) c7 w- Q0 x}
w. d5 w, v" R, U! ?1 h" A( S0 K3 Y+ O, b, a* q1 x2 O. V" {
function sizeCycle(text,method,dis)$ F! w: y+ F9 W
{" g) E& E# B: U% G
output = "";1 R' a6 w7 T; G, e
for (i = 0; i < text.length; i++)) A, J3 P4 j6 p& x8 c' r3 F
{
& B3 c+ G% J8 P# d' P size = parseInt(nextSize(i +dis,method,text.length));
; y- y7 Q$ E \- x; g7 t; P% |% z output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
P# o- A g) t6 }% a; w3 y }' P }7 |6 e& O
theDiv.innerHTML = output;* t3 A$ b) @9 D* L1 m
}
2 W+ {& |. z, |* q. M& a f. }6 F" [# j% d9 x5 y
function doWave(n)
- y+ Z$ K7 D5 S; {4 l6 ?* F' x; s{ 0 J) `5 O7 P; N; `
theText = "JavaScript";
4 W% B' T# h5 F* l; s: d sizeCycle(theText,1,n);
8 \& P+ z6 K' \! e b( I+ h9 M if (n > theText.length) {n=0}1 s0 {0 H* M- h' J
setTimeout("doWave(" + (n+1) + ")", 50);$ f P6 e+ t& G! ~1 J" ]
}4 @ o' P+ }: |0 m3 ?+ V
</script>
3 b+ d1 K4 k# h+ O0 b; {<div ID="theDiv" align="center">
1 S4 e. ?4 j" I; q
; A; V3 I& w3 m g% O# P T</div>
+ V% Q2 n: i# v
6 F) ], G0 g; ^5 X
: o2 f. H: N( z0 m4 y3 m9 A/ J3 h N
! B8 l; ?) G1 E3 {第二步:把如下代码加入<body>区域中<body onload=doWave(0);> |
|
发表于 2008-1-21 20:50
|