标题:
网页之奇特的文字变化特效
[打印本页]
作者:
zw2004
时间:
2008-1-21 20:50
标题:
网页之奇特的文字变化特效
脚本说明:
3 w1 [& s* E; H5 j- q- G0 t
5 m" N! p6 V$ y2 _ R
第一步:把如下代码加入<body>区域中
, ^; i7 r' s n8 }
<script language="JavaScript">
9 U8 f, i! R9 x3 F- v5 [
4 L/ ]* f7 L) z* R( H7 e
function nextSize(i,incMethod,textLength)
# a3 V8 S% Q K6 a+ Z/ Y
{
, h" b2 g5 t' ~+ o
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
& Y5 b: k4 D4 E7 o3 m! M
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
4 |' ^9 p, Y6 n4 x. T3 }
}
7 g" I" i- a, R+ O
) p$ \1 Z+ _* e7 r4 x
function sizeCycle(text,method,dis)
: o3 d* T0 A |& @
{
0 @7 E1 H A# T4 g2 h
output = "";
$ \8 Q8 j6 S3 j8 X
for (i = 0; i < text.length; i++)
. Y3 y4 ]4 c# t, z) r/ ]
{
7 x6 C, \1 W$ e K- V3 M
size = parseInt(nextSize(i +dis,method,text.length));
2 I- I9 H. }5 s, A; a6 r$ {
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
% t9 m+ _. p/ T4 k/ R
}
( z7 b) r1 `3 q4 D& q! d
theDiv.innerHTML = output;
& [, Y' p! ~; s: `+ J
}
# m% q$ E- @. Y+ l6 E
' B' G/ R5 ?- g' E
function doWave(n)
* b: Z+ o- [: T6 y
{
1 J4 V; e: d5 v4 M
theText = "JavaScript";
& r! f5 R3 I5 g- c! X
sizeCycle(theText,1,n);
& I: }4 }$ ^0 ~8 t: |
if (n > theText.length) {n=0}
3 P# D' j* ^4 D/ k3 S
setTimeout("doWave(" + (n+1) + ")", 50);
4 a; J# C# S. y* u
}
# t' c/ E9 W9 O6 S$ B
</script>
7 J) Z, @# Q% h- T5 H% w0 e
<div ID="theDiv" align="center">
* a+ Q* u# x; x$ C& l; J3 L
p, n; j$ _; y$ i- l, x% e
</div>
% Y1 @% D5 J2 x" J9 ^9 {
0 L1 L! M6 ~4 ^5 e$ [ P0 U3 a
& d8 p$ l3 }# F/ v8 }
8 |/ q" y! A- s; t% z1 }
6 z8 E5 J8 Z6 @5 h7 Z
第二步:把如下代码加入<body>区域中<body onload=doWave(0);>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
