|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之奇特的文字变化特效
脚本说明:
! g9 |+ V" P# V/ x. a
/ D0 b, _$ t( b( O& `7 o3 R第一步:把如下代码加入<body>区域中2 d# `& @# O* J5 }, t7 X6 }$ D
<script language="JavaScript">
) C9 |; N" N6 n" a2 x% B7 ~8 K
' E- `, r3 |" s) cfunction nextSize(i,incMethod,textLength)
8 S' x9 V5 |9 e6 i6 p$ C3 o; Q2 f7 V{2 k9 T: S1 h5 `( t- ~8 F; h. X2 {
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
0 {1 s+ X/ i' I4 Q7 qif (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
- i, e5 E5 Q& r0 |- Z8 M( ^# L}' i- w) \8 j f: e$ V
; T+ X% [! V& U! n |function sizeCycle(text,method,dis)2 o, x- g8 g& I/ v2 ]
{
6 T' W& ~9 S9 z- ?3 I3 ~/ E output = "";$ C% w5 ^, _7 F
for (i = 0; i < text.length; i++)
z8 O3 G: P( v# w! M {
" W% g" c" Y% D# [$ A9 k8 a/ r size = parseInt(nextSize(i +dis,method,text.length));- x' x9 m% Q. V0 p* Y( p9 Q
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
2 u9 d# A% g3 g, p }! {# Y1 u5 R8 w; d+ o, y2 Z
theDiv.innerHTML = output;9 r! B& U+ E# ~5 S" X/ k$ d* @
} N" A/ x* m3 O2 a# V( [( Y& o
7 L. q4 J1 M( d
function doWave(n) , k5 q1 Y# a- X. n5 w! `
{
) I. M6 s" O% ?' a theText = "JavaScript";
. ^! p9 R: K) B& ^ sizeCycle(theText,1,n);
2 L0 h9 h. I! W if (n > theText.length) {n=0}( S4 d5 J. _; v8 e, L
setTimeout("doWave(" + (n+1) + ")", 50);. F- Q, B& L' l' P# S" F
}
3 S& q6 a7 W+ A5 u</script>
4 M" S% ?6 F7 I<div ID="theDiv" align="center">$ n; E0 }' i' A, P
+ V, g5 ?4 Z4 M% M8 `</div>; W3 `+ Z! U3 G) p2 K+ u
; `# H: J2 v4 L, v0 k8 J. i; K
2 e$ V2 G- ]/ ^4 O8 X; }1 }6 w2 o$ r: r# G3 z" I1 A
, j- p8 f8 |/ P) U. T% u: w* i& W6 s
第二步:把如下代码加入<body>区域中<body onload=doWave(0);> |
|
发表于 2008-1-21 20:50
|