Board logo

标题: 网页之奇特的文字变化特效 [打印本页]
作者: zw2004    时间: 2008-1-21 20:50     标题: 网页之奇特的文字变化特效

脚本说明:
! q' [. p% D, d( f' A2 A
# }. I7 w* W% B5 m5 b4 f2 L第一步:把如下代码加入<body>区域中
1 D# y/ m& G7 R5 n <script language="JavaScript">
# ^7 h% X+ _& G4 K8 t& x) `# u6 T2 ^9 h/ I
function nextSize(i,incMethod,textLength)
) i2 `. ~; Z( \& E{
: w  H  c$ V& O: F) T! E3 F" y  Dif (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
8 R# k9 y3 K' n8 u' S3 kif (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));; A% _) h- Z; {6 {
}0 c- g5 P2 k8 P, V9 s3 b

5 L% R1 X1 p3 tfunction sizeCycle(text,method,dis). h3 E) @. q; s1 D; b
{0 E3 Z$ }/ v4 b* h
        output = "";
; Y! i! [4 R, |+ }. t: s7 p        for (i = 0; i < text.length; i++)
. v) V5 `9 J! @$ h' E        {
6 F1 o9 n3 \6 A1 L7 s2 f; x                size = parseInt(nextSize(i +dis,method,text.length));- i, J2 L$ p3 u4 ~
                output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
8 L8 R: x& h# A        }
0 ~3 i/ t- }# W* ~/ t5 [        theDiv.innerHTML = output;+ P% P, E2 A$ c
}
' ]7 w- Q5 A4 c1 s
: {/ i+ k: z/ v4 jfunction doWave(n) ; k  E  p, O; v- k- L  @
{   
5 u; I+ b7 J4 A( }8 [8 m; C1 W        theText = "JavaScript";
6 [% v8 \9 O1 u        sizeCycle(theText,1,n);
2 h( ~! [5 t, b9 X        if (n > theText.length) {n=0}) I3 T) p8 v1 c/ L0 Y
        setTimeout("doWave(" + (n+1) + ")", 50);# P1 C+ A; n2 S# h  Q5 K/ o
}
: d9 `8 x- q& t  Z3 J5 c3 u) H7 N</script>
; v$ d: h# ^! e# f2 ^<div ID="theDiv" align="center">
/ j- H% L' q; t# s% ~1 P8 }" Y' P/ y; B/ P  X  B
</div>
2 A% H# N' {5 J1 o! W4 c5 {3 e# s& ^" S# Y4 S) Q) X
6 ]$ }- Y0 v7 e' x: X1 m
& n  ~3 F' {& S. K0 K( P5 m1 Z4 y
6 P, S- O$ _  U
第二步:把如下代码加入<body>区域中<body onload=doWave(0);>



欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2