标题:
网页之奇特的文字变化特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:50
标题:
网页之奇特的文字变化特效
脚本说明:
3 U2 h5 |, M- u
: m' l' ^8 s9 d* w( A
第一步:把如下代码加入<body>区域中
! T5 s, \3 h W: b8 n; C3 F5 k5 d+ ?
<script language="JavaScript">
J: j4 f' c" z: ^
5 j8 ]. p% \: v- A7 U- h
function nextSize(i,incMethod,textLength)
. i" p5 P: v; |. D8 @1 r
{
/ [: J2 a! V+ Y4 ~( H& V
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
/ @0 e% @! T5 L E" k+ F: z
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
( J( a7 k( G1 d- P7 l3 D
}
/ U5 ~2 g# w% ]* T/ i
2 K5 m6 H4 b( _
function sizeCycle(text,method,dis)
0 u/ I: S+ y9 d, h" g
{
: L8 Y; w. V/ h# h3 C9 J
output = "";
" t) f4 d$ c. g4 L' O/ r% D. Y* c q
for (i = 0; i < text.length; i++)
6 n, `5 q- R# ]3 B
{
; s, q7 {( Q1 j) _/ K
size = parseInt(nextSize(i +dis,method,text.length));
# q V. `1 x- ]
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
/ m& v$ @# c2 }! e
}
# N# C* `! c6 X) x) f+ n% C* E
theDiv.innerHTML = output;
! a) x! m, ]; D+ L4 ?, c
}
: R: o ?1 G$ R' E# I
) g1 R( m, i0 Q2 _/ G, K( E
function doWave(n)
3 r+ i0 \% |. q+ _9 F( m1 g
{
w2 i/ b4 ^- Z3 B
theText = "JavaScript";
0 n8 W/ v$ h( L) ]+ J' o' q
sizeCycle(theText,1,n);
$ n7 ?5 U9 F5 M Y2 p; u% `
if (n > theText.length) {n=0}
- g9 E/ K9 O5 l- j: m) o2 l& q: O
setTimeout("doWave(" + (n+1) + ")", 50);
+ r& m, v: p5 t$ k
}
; t7 u9 ~$ ]9 R
</script>
) p; Q8 M2 s6 J& ]( q
<div ID="theDiv" align="center">
) x6 q4 A- b% b: @' L0 z; c- a _) C
5 o4 U9 O! g$ ]2 D3 J- l9 b7 O
</div>
! W& _5 t5 @- X6 v) ^2 i+ L
5 o7 |& @$ K1 e- {& `9 I% l
4 m8 ~5 ]( {) h, a$ F7 Z/ I4 y S w
, {6 x) |' |8 k4 I$ p8 S
/ t, G9 E! @8 d* O* `0 Z
第二步:把如下代码加入<body>区域中<body onload=doWave(0);>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
