|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">5 T. K* {- q; e2 s" l
<!--
, ~# }7 J9 D& `8 p/ u// convert a single digit (0 - 16) into hex
7 ]9 a7 n. u6 F1 [/ c" B& m% e6 Yfunction enHex(aDigit)
9 S9 P. W% Q+ Y. @/ ^/ G) ?9 g{
4 J m4 f4 e5 u9 [ c4 B return("0123456789ABCDEF".substring(aDigit, aDigit+1))5 e( U* ]) G3 i- c% I
}' j1 A; H) p2 U, ~: O0 r! O
// convert a hex digit into decimal. n5 M9 N6 C% [! u/ l6 ~) u
function deHex(aDigit)% H! N: v2 g1 P) K0 ]) E: E4 U! l
{
" |- c! B# r: t# v! V" a) H return("0123456789ABCDEF".indexOf(aDigit))$ u2 }" v! V+ X7 V
}" v8 s4 M9 T8 N( b% _% u
, @5 }; H4 I$ \; g. o! |' J1 H// Convert a 24bit number to hex* d3 U9 P+ l. n V9 P& l
function toHex(n)) i& `# @* z. ~7 A4 D/ j5 d
{
- t9 X8 F6 }. r N- | return (enHex((0xf00000 & n) >> 20) +- Z0 v7 f5 u5 J; ^( |) A
enHex((0x0f0000 & n) >> 16) +
. E7 T, X% G' H" n- T enHex((0x00f000 & n) >> 12) +
- z% v* k; l; k; |: R enHex((0x000f00 & n) >> 8) +
% X$ l! x2 o5 g. q4 A enHex((0x0000f0 & n) >> 4) +
( h* ^2 ^. h6 O8 @ enHex((0x00000f & n) >> 0))2 }3 [" n0 F2 _4 ^' M, ?
}
! y% g A' a7 `! |8 w// Convert a six character hex to decimal# L5 m2 ^+ A: Z. ~ f
function toDecimal(hexNum)
2 `7 p# G% m/ d, q{
# O* F/ r* v$ e% ~7 v var tmp = ""+hexNum.toUpperCase()
+ J& D, x' Z9 ^( I9 Z while (tmp.length < 6) tmp = "0"+tmp
- K/ |* m0 I; t( @) ^8 ~ return ((deHex(tmp.substring(0,1)) << 20) +6 m8 O1 J: P% P& b, l
(deHex(tmp.substring(1,2)) << 16) +
( r, r" d9 T( l5 Y( U (deHex(tmp.substring(2,3)) << 12) +
3 l9 Y! j) s$ G. ^0 Y6 \* h (deHex(tmp.substring(3,4)) << 8) +5 c& F9 j% k. Q( b3 F, \. {* E$ J
(deHex(tmp.substring(4,5)) << 4) +
9 B' K' v! d% G$ L (deHex(tmp.substring(5,6))))
) N$ Q0 a4 r1 j! H. R# }}; c3 \, u4 b6 ^3 M
///////////////////Shimmering Links/////////////////////, J. K7 \2 b5 V: s
//global variables0 x, `4 }2 s% o; d8 Q4 M
var hoverColour2 F# l u/ r5 z& _! b+ A/ h7 D
var numLinks;
+ }, ~% _2 x8 Q! c( c2 `var rate;
2 f; ^$ z1 C' T$ W; J- G. }var numFadeLevels;
0 q) _/ {9 t' v; q* Zvar bgR;
1 x0 _" h7 w! H2 c2 ?: C' |8 [/ W& qvar bgG;! V% y6 d, @. ~6 o, U) ]
var bgB;
. W0 B& Z. v/ J1 |# avar currR;8 k" R. u; Z0 _* T7 i
var currG;/ \/ _' P/ G4 G: v+ w1 j ]- \( P
var currB;5 [ R' H& B% T. J1 R
var count;0 K0 s Z- m6 b7 j
var fadeOut;, j1 F9 y1 f/ m% l
var continuous;7 k: ^- e1 x# y% e& Y( O( y* R
var newColour;
, }9 K0 F! N% m- d- s3 Nvar tID;2 J% h" h, d6 ?; K3 m
var redInterval;; n; X; T# t: f9 S" F
var greenInterval;
, x8 o J4 K ?; y* R! }var blueInterval;
$ A/ v4 G7 J; B1 M* zfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
* f+ d: @/ G: h: K1 J{( N S n2 D4 o+ @% E$ @* \
hoverColour = mouseOverColour;
+ `7 s. x& p! X# J numLinks = numberOfLinks;$ ^9 B! N5 y4 S+ j4 A
rate = 1;
* E& s9 a/ p( b8 m) ? numFadeLevels = 30;! {. b, g% f" l- J
function initArray(theArray, length, val)
# r- h% J) R+ t {
, l8 ?( ]0 ^' O3 J" K# o for(i=0;i<length;i++)3 {) U" J8 R1 a
{0 _2 e$ o+ {0 Z& O1 I- i3 C/ C. j
theArray = val;) f. v6 ~% W- E
}& z) b! `" q5 p4 ?; `9 M5 x- g# Z
}4 K8 l0 D( n# I4 w8 e! r
bgR = '0000' + fadeOutColour.substring(1,3)
[1 _8 H" i4 U+ k5 |, ] bgG = '0000' + fadeOutColour.substring(3,5)
$ d% L* x/ m3 c+ F bgB = '0000' + fadeOutColour.substring(5,7)
/ @0 _6 s3 \$ ~. Z- D& {' O currR = new Array(numLinks);
2 J; m- b6 R8 h% a% P$ x# u currG = new Array(numLinks);
$ @7 |2 @/ H& Q/ G( O currB = new Array(numLinks);
& a6 V' Q7 R) D& M% d* C; x3 `' K count = new Array(numLinks);
8 r( [. G$ U5 h6 Z* O3 } fadeOut = new Array(numLinks);
9 O: i& T( R6 |3 R5 F4 f/ e9 W# p continuous = new Array(numLinks);
4 s% f+ i; y' e" K. i7 @ newColour = new Array(numLinks);
4 G3 V$ X1 \! I; q tID = new Array(numLinks);& ]+ ]: f* Z( R9 |
redInterval = toDecimal(bgR) / numFadeLevels;
. n+ {* u0 C, i% O greenInterval = toDecimal(bgG) / numFadeLevels;
; v! D: o- c* ?, v0 K! w blueInterval = toDecimal(bgB) / numFadeLevels;
( O! H9 l6 S/ ?8 l% E initArray(currR,numLinks,0);/ ]1 n9 Z6 b# u7 m5 w# v [: D
initArray(currG,numLinks,0);
# B- s H, m+ w initArray(currB,numLinks,0);
" E! \2 }0 S6 s8 `2 n* P initArray(count,numLinks,0);
" i8 S2 t' K [. Y9 n7 a initArray(fadeOut,numLinks,true);
1 }( ?( n( g: _1 B initArray(continuous,numLinks,true);
I& I$ ]$ a# P8 m: G} " K* d- R; Y% j' S2 y
function startFade(id)
+ I( v+ j' B) |' G* T2 d{- z7 D1 R$ g+ ? k
if(fadeOut[id] == true)
8 u/ _* ]0 z; ^* u { /*move colour towards background colour (increment)*/
. y6 M: j# H$ k/ c7 [* k F currR[id] += redInterval;
I a( [0 t" E& t currG[id] += greenInterval;8 q! @3 ~2 v( ], g
currB[id] += blueInterval;
: {. z# K* M0 @5 A newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
$ |. U* X' Y$ G: Q- e+ v if(++count[id] == numFadeLevels)7 z+ R% @- i/ u, a
{
# j1 h+ g: H8 H" k/ N5 |4 o fadeOut[id] = false;5 V/ p0 L+ V$ F' M/ \
}2 ?! P; H+ k5 S- F0 M
}
6 `9 C0 ~ g0 W4 G) J6 p else
4 ?2 h( k/ a& T$ [; f6 j {6 w: b% M7 z6 a; F
currR[id] -= redInterval;
* i6 L. L& N1 \7 |. w' v# X4 @9 ?% e8 }; K2 y9 \% x
currG[id] -= greenInterval;6 J h3 v7 `) H" K* x0 y
& {7 Y% N! V: S9 s
currB[id] -= blueInterval;1 }; W q$ z: W# \
0 M" D4 b# V" Y F2 ^4 T- t newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
+ y$ R4 x# @ Z' ?% ~: T. f: D! v. R5 X
if(--count[id] == 0)
6 p3 J8 b3 v& F) h5 O( z" c* ~* B6 i ]
{* V3 M( o* g. i6 O; Q
, @7 Z& ]! L8 B; C% q
fadeOut[id] = true;
1 @8 J3 B# b: d# B# z# B& D3 v; }; `9 ~3 R4 U
}$ }- ]+ L# D, v, g/ f# n
# Z+ n6 {) n/ I2 H n
}
' _& ~% a( b0 K: G
# z! H! @4 _# N$ T* Y6 V if(continuous[id] == true)
2 c, M6 ?8 e" F! m! F" k% `7 [
8 M: I+ k: l% Q* l, U& \ {
3 q2 @( b7 X/ A
2 |4 I* e& y% x2 E document.getElementById(id).style.color = newColour[id]; ' ]3 M( ]8 D# ]2 o+ V3 l2 m! b( E8 ~" Z
, k2 I+ p! h0 |* ~' ]. E- N }
; {$ d9 f$ M" _! V1 X- j( Z
9 d- |. l; W) v, x4 G. H else; M. D8 e# h$ _" x: G2 T+ }
& m7 ^% a/ \+ e `( ~: }& |. z: U2 ? {
0 f- |# x9 R6 k+ g0 ]# @# B& @8 G) a0 ?6 P1 i( Q0 m
document.getElementById(id).style.color = hoverColour;3 L" C, L6 |, `3 x/ {
& J, r; u! J- X! ~4 r
}
8 C9 M6 s' {6 K9 B; u8 Z! E q2 q1 X
clearTimeout(tID[id]);
% S5 W2 o1 C9 G- w
6 x8 s( }3 k: {* V8 t tID[id]=setTimeout('startFade(' + id + ')', rate);
/ O( H' g- B# x' E
- S% q; Q; `7 e$ R}
9 i$ l$ V7 ^1 l* L+ Y. C3 D
2 a, D+ E3 N9 @* a. Ffunction continueFade(id)
8 `3 S3 A* ]! T2 a- b Z: ]0 M4 S4 i/ g1 K* ~) y
{
. i6 q V) g, B. R n' V3 }! a% m2 ~5 F. u. l
continuous[id] = true;. ]( a9 v |5 q" u
) G4 `% R- U3 p! ]9 U# G9 E
}
$ f: V+ D' g2 @! k% k3 _
8 L0 Y! R* B. kfunction stopFade(id)
2 W9 K: h6 `# ^) n4 }( a/ L0 F1 |! x( b7 t- [; N1 ^! X% u
{8 V E1 R' a; m Z! n8 q- y
1 H& M; m( J/ ~8 k& k/ L% V
continuous[id] = false;
4 ]- Y* X4 P" b2 D$ a5 h" S8 K( W9 D* b5 F
}" c! Z2 f; \& e! m5 ~3 k8 O
1 y+ p) h- P/ Y, t/ N3 V2 k9 zfunction StartTimers()
* j7 @. W9 Y0 N
3 _2 ?8 Y) n) `; {- v$ E{ //set up an initial set of timers to start the shimmering effect
" B7 }) g9 z! @7 G9 s# x
& |- X: K( ^. v: h2 d5 { for(id=0; id<numLinks; id++): U/ G- P9 V6 `0 [* F1 {
: q5 ]; q3 H! d, C) i% P
{
( ^; w, |" Q- ?3 \0 _9 \+ H' y" K7 F) }7 E0 D" d8 b5 o. ^
t=setTimeout('startFade(' + id + ')', id*100);
1 W; m9 |& ^5 C4 ?. h8 s& Y% J" x# g) l. x
}- K( [# R% _) _* m% U Z
. |, _* h* Q G" [
}8 j7 `# n, H- |) {4 q0 P' k
X6 J0 D9 u; F
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
7 q, u7 i% X5 d0 `( a; S2 L6 r- D `8 O8 n0 u3 p; d
initLinks('#FF0000', 6, '#FFCC77');* R O. d4 _. E, v2 N( Z; t
' E6 K) U% m7 W' ~//-->
5 R# H/ g; O- y7 M
- p: S3 @* g7 h- C0 F7 S6 d</script>
0 |( g; d e' h/ B; e( V- q<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
& t1 ~' q& j: h7 K</a>2 h5 i6 x4 ^( W+ f
<br>
+ J& O- v6 u: _, z% _ k# f3 _<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>9 w* r; W. G; |$ ^+ Z- J5 C
<br>
7 V* A: Z$ u4 D, {2 f<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># Z, o+ A- G9 d6 N0 g" g3 i
<br> 5 n: Y& H4 D. H
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>( Q$ o( ~0 t) w& M1 }8 z% x
<br>
: E# T: V/ C1 G; u8 X9 i<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>/ B9 n9 a5 a- u/ h! s
<br>
1 k" `& ^2 Y! L2 }& {! I4 l7 v<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
9 j) q- l/ T( C5 A+ ]2 Q<script language="javascript" type="text/javascript">
" d% A3 O: [+ r<!--2 r$ t5 } i& w& R7 W" l
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
8 F- I8 y6 @; f5 E! ]# O9 t. _) q- p//--># C" H, ?1 R4 ?) L
</script> |
|