标题:
网页之奇特的文字变化特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:50
标题:
网页之奇特的文字变化特效
脚本说明:
3 ?% x8 M; b3 r8 b( t3 l
# z9 s! [/ s `' v, E, G$ o5 b4 m
第一步:把如下代码加入<body>区域中
- N, C6 K/ C! s# Y' D3 e# a
<script language="JavaScript">
& q% S+ q7 P' T' a/ x+ s
1 `: z8 I5 ~, j }, I @
function nextSize(i,incMethod,textLength)
% C4 L, O& Z5 }9 d! N3 B
{
3 \+ ^" W( n, ~5 E# [( r' Q5 U5 Q
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
; j. j1 A' ?4 v! \
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
& P) ^$ L" n6 H0 Z8 c
}
9 e% r1 m/ E. b4 h' a2 }4 a' j
# R$ n: j1 j8 w( Y7 M6 S! k
function sizeCycle(text,method,dis)
; m4 ^& Z2 b9 }
{
+ O1 X6 e; [4 X4 D$ x# P
output = "";
9 b9 N; J/ p! c" D
for (i = 0; i < text.length; i++)
0 \- d' O3 Y! q5 O9 o
{
6 }; R6 q) v7 b8 x: i% z5 p: x1 b
size = parseInt(nextSize(i +dis,method,text.length));
9 R+ m' }9 q1 Y
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
4 Q- W6 T3 [! J* Y t
}
3 t# E( F3 a4 O8 H% P' c* q
theDiv.innerHTML = output;
) M1 ^$ e+ [9 d- O* }9 ^( C4 z
}
5 h5 I9 h6 ?: _4 V
* }6 H8 P0 K4 Z- A4 g6 K
function doWave(n)
- U: w k0 C( ^; X: X2 @, T
{
& z2 R% b" M( k" L/ c2 J! u1 r
theText = "JavaScript";
6 n& P8 `' a8 S) N# D+ D0 i8 q
sizeCycle(theText,1,n);
0 t' s0 o ~1 R$ {0 V( |
if (n > theText.length) {n=0}
: a7 t( u4 ?' R
setTimeout("doWave(" + (n+1) + ")", 50);
% n) @/ k$ ~' r, H2 a9 J s( L
}
. z- T5 B9 @# O, r5 R* C: w
</script>
( r Y$ ]$ k+ x
<div ID="theDiv" align="center">
' _5 S* b/ @1 X; Z$ B
- b7 H, r" J! a" l+ P
</div>
" k4 R3 X" ?9 j0 K" S
) U; u7 {% f4 ~
/ \+ R/ y0 }& |0 ?. {
& g3 H( a3 s# F& _3 C( i
) r9 h" h! W* k" D7 V& }
第二步:把如下代码加入<body>区域中<body onload=doWave(0);>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
