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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">: e; |1 C4 s- A; [& L* v
<!--
5 C) s* x( p) \+ ]4 I) n// convert a single digit (0 - 16) into hex1 U7 v( [* z' ]( K3 j/ _
function enHex(aDigit)
" `% \9 ]6 c; g{
6 t3 ~) h$ E" p2 y- G7 Q; r5 d return("0123456789ABCDEF".substring(aDigit, aDigit+1))" I$ G$ c! `7 d& S' ?: D- I3 f1 y+ z
}
! l& f6 L1 x3 |) z& T. L7 i6 y// convert a hex digit into decimal
3 T% ^% U7 {: ^. g" v2 T; x+ P8 lfunction deHex(aDigit)
5 F3 E/ [$ }# i% [$ {{4 F3 C3 T ?' Q8 u
return("0123456789ABCDEF".indexOf(aDigit))
0 H% y( {" M$ P; M3 J |" H}. T. y) I# h8 {
2 K, S) R) e- l' j1 M// Convert a 24bit number to hex; Y1 ^& ? f# F5 f& N) a
function toHex(n); v! R& j% Y/ ?5 h
{" W' @4 g4 \7 `8 ^. ^4 H2 I, N' K
return (enHex((0xf00000 & n) >> 20) +! q8 m4 _0 B0 q; D+ Z
enHex((0x0f0000 & n) >> 16) +
: N) K$ Z; p2 ?+ C( u- w enHex((0x00f000 & n) >> 12) +
# g6 R* i- W0 A$ N/ a: l5 Y enHex((0x000f00 & n) >> 8) +/ i# q1 \1 I$ o' V
enHex((0x0000f0 & n) >> 4) +
' g5 H1 a8 H, j y enHex((0x00000f & n) >> 0))) E f/ {8 Y( d+ h1 n* @
}, T5 M) R( k0 @+ Y2 \
// Convert a six character hex to decimal
- O9 G% N( I+ G/ O# xfunction toDecimal(hexNum): \+ P6 C. B4 u6 T% B
{$ \% z) A* V" x2 E$ g$ x }
var tmp = ""+hexNum.toUpperCase()8 p! A+ w& Q* g! m" s7 C8 q& H6 b( E
while (tmp.length < 6) tmp = "0"+tmp% z( Z8 K- j7 Z
return ((deHex(tmp.substring(0,1)) << 20) +
; F# N2 [6 D/ u% p (deHex(tmp.substring(1,2)) << 16) + ) W5 V- L( W) e+ y" u5 W/ Q1 g
(deHex(tmp.substring(2,3)) << 12) +
* t- t' v; f2 Q3 p8 ^: ? (deHex(tmp.substring(3,4)) << 8) +) o! f, G c$ A: n- v
(deHex(tmp.substring(4,5)) << 4) +0 q7 A3 I2 z( B1 N3 u, @! z, u
(deHex(tmp.substring(5,6))))
, e' k4 l; ?, J: w! _}
2 A. O0 A4 _; | L; z# _6 B///////////////////Shimmering Links/////////////////////2 b* i% l, M4 |1 a
//global variables9 ~) \: M; P% n8 P z9 G
var hoverColour
% m0 C( T, u; C. ?var numLinks;
: [1 t! ]. Y3 V+ ~; fvar rate;; J! c% K, Z8 {
var numFadeLevels;! V0 ?. o: W2 t) u
var bgR;2 X( H( f- q' ^; j& e
var bgG;
+ ?& A8 C1 j; t) y1 ~& u8 v& Q" n# rvar bgB;
. J* P: n" O. G s; U7 ?5 Lvar currR;1 X5 t0 x9 g. `9 {: n. B
var currG;$ L( @" I; \/ Y9 _$ h _
var currB;
+ a) t+ C9 W0 dvar count;
0 X/ V# \/ ]- Y% D7 h$ uvar fadeOut;' g3 Y) t( n# B h4 v9 f2 L
var continuous;: e; _& k, Z ]: B
var newColour;: \" l. z. \ Y+ ^; u7 t
var tID;' S% S; e7 {! i; _
var redInterval;" j" v3 }; [8 q$ U+ S+ q; m
var greenInterval;
1 M# K5 t5 m) Zvar blueInterval;0 X ^4 j5 i( f- }9 F a
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
$ Y7 n7 S: C6 s0 J' B& t4 o p% T{
6 g0 g: w- P3 p- B hoverColour = mouseOverColour;# R+ M7 H7 D+ x& Z, n! ~
numLinks = numberOfLinks;0 C `8 B) b; y: c% t
rate = 1;$ F" A5 K1 k4 A$ x/ c j
numFadeLevels = 30;
5 q0 Z0 m, @) `/ Q function initArray(theArray, length, val)
3 N' T4 a; ?, S {
. T" }' v7 b c/ n" ` for(i=0;i<length;i++)
& B. Y; ]# R+ ?; L. x+ c {2 H9 H0 e3 r% S% v; I
theArray = val;
, J( b/ W' I H! t }
% b5 ^2 P- l& ~1 ~7 l3 w }
, T, O4 ^# A5 D bgR = '0000' + fadeOutColour.substring(1,3)
$ A6 M$ d( _5 O- n6 o1 X6 ~ bgG = '0000' + fadeOutColour.substring(3,5)
3 K$ l: I# ?/ \. } bgB = '0000' + fadeOutColour.substring(5,7)/ r' ?# O* h. J. X7 c7 J6 \9 |
currR = new Array(numLinks);4 C9 C) ?% \) o n8 I
currG = new Array(numLinks);$ H; ^) T( B" {/ A% K3 z9 A
currB = new Array(numLinks);9 C6 A* I* j x6 z7 }; z% Z4 y! F" y
count = new Array(numLinks);
! u( r/ D& L" ]7 [ fadeOut = new Array(numLinks);& \; y- B, j# u+ b9 R; s
continuous = new Array(numLinks);
4 K6 q4 N4 `3 b' Z- B" d newColour = new Array(numLinks);
. r P; W L- v8 d) ~& E tID = new Array(numLinks);
6 q2 h: k7 r' F% K redInterval = toDecimal(bgR) / numFadeLevels;. u$ W/ C& x- d0 S1 P
greenInterval = toDecimal(bgG) / numFadeLevels;5 [1 ]! v" C& I# p
blueInterval = toDecimal(bgB) / numFadeLevels;, |* G$ r6 }7 |, t. _" B) f0 g$ s" D
initArray(currR,numLinks,0);$ D( C% u8 v8 @% R# O: H
initArray(currG,numLinks,0);( I/ o d4 R0 A9 |
initArray(currB,numLinks,0);: n% S# W7 Y( T+ \3 B8 b
initArray(count,numLinks,0);
; {5 J" m( A1 s$ D' ~ initArray(fadeOut,numLinks,true);
7 o- p3 ]. H4 A initArray(continuous,numLinks,true);
; e0 G& i4 X! s" [$ E7 m9 O+ O u}
- v( d5 f( a4 S' Sfunction startFade(id)/ j5 {$ V& |) \- [) ^; N& { m, S. q1 f
{7 y* b# n" g0 C9 F8 J
if(fadeOut[id] == true)9 w4 y& X& l/ h" h' ~1 r
{ /*move colour towards background colour (increment)*/ }* m; u# ^$ s. b3 d5 ?
currR[id] += redInterval;
9 o% ?' Q& u/ { currG[id] += greenInterval; m# Q/ ]/ \0 u0 T! t0 `
currB[id] += blueInterval;# m. l+ C3 L8 [* j
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
( x0 d0 e7 C8 X5 F2 p if(++count[id] == numFadeLevels)( u# v# r R0 L/ l: y
{) J$ k; P. X* L [3 i1 P: d( G
fadeOut[id] = false;- h9 M5 ^* r& e9 \
}
$ B7 Y5 u, h+ [& X/ c }
+ u5 i: y* A: `2 L else% A9 b: q: `" x/ S
{4 k" U; l/ T7 G5 E9 G9 L0 Z: p( a
currR[id] -= redInterval;
, L' |% q$ N, K+ {
! D" R0 M: Z2 r$ Y5 r currG[id] -= greenInterval;
& B$ X% N3 }; h- r, d# D {8 q
currB[id] -= blueInterval;
; O! b0 s3 z8 e% I% n$ q; \" @2 Q
S$ ~+ E. d' k: M newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 X. ]. O" |9 _ D) @4 t9 U. d, u* J! a
- C) A1 ]2 D7 \/ `' n if(--count[id] == 0)$ s! d, P0 r1 I& V a& E6 l7 \
. V4 O9 l) X% q {* O1 y4 |1 E% S
1 E+ D7 s& [ u$ x, v! } fadeOut[id] = true;
! y; M, B; \+ g! s" F
0 k Z5 m8 j" f2 B% {0 } }
3 q. m1 d8 @# q; E5 [- D4 e& m" G7 K X9 {9 }' d. b9 ~
}. p7 {* b6 [# k( M% ^& s. Z
; D8 G. _' @6 J: l/ I if(continuous[id] == true)
) i/ x3 L4 d: P) b
* L. j5 M* X- g7 |: P# N" U, z4 B: t {
7 h, y1 u* ~8 [* k' ?: K- N- _4 U
document.getElementById(id).style.color = newColour[id];
& y: u% P7 V9 B7 S
9 R, K2 C5 m' {8 R E& I( ~ }
0 Y2 o, Y9 Q1 `- m' ~* g+ e3 I1 A8 u; r: A
else
5 K0 x! b6 O8 k) D7 H" r0 l8 k! p; k6 q0 i2 s) x- E9 Y
{
8 ~3 u. q. j6 Y; s8 A+ b; r- E7 b4 s- X- K( n" G5 q p* d
document.getElementById(id).style.color = hoverColour;
8 ~- v, s9 }$ }; d" |
# E* d/ J( b0 E2 Z& T4 y }4 Z; B5 E, v% \& ~' M2 ~/ R0 s
$ J6 I7 V/ S' `6 I( ]0 y clearTimeout(tID[id]);* }2 G5 F. D( F) J0 M
, q8 Y. O6 b0 D% I tID[id]=setTimeout('startFade(' + id + ')', rate);" u6 R% n/ k2 R6 L e
9 S) x; D+ A$ a# W) K0 C4 X5 X}
$ P7 ?& E: `: j5 I: ?1 k2 n7 z2 ?
8 b S# W* ^& \( W, I0 {, ], R3 tfunction continueFade(id)
; N# ?; ?9 d2 G& P* p$ ?" s, {3 ]
{
3 A7 j/ t+ ~$ w/ T& n: v
8 N9 m: q7 k- ~6 m3 l2 v( j continuous[id] = true;
C* A( n h$ \' w& h. { G2 p# |; Q, g7 Z
}
8 U0 T. E/ x7 i/ w
9 m0 Y9 s ?" k! C# _function stopFade(id)
; M( Q2 {9 w; d6 Y: O' T9 W% B4 w8 x5 O) b
{
5 g# n K& K3 M7 S& C. ^- f4 n8 k# j0 ~% x; A8 y
continuous[id] = false;
. x" p. ]2 ]/ Y. D X1 b3 ~8 P$ O. o: i
}4 H3 l! u4 |3 x& G1 _* `
- L0 w7 u- m* G& cfunction StartTimers()
* w' J, O. Z4 t/ k* B( I. Y% N" Z" ]& b
{ //set up an initial set of timers to start the shimmering effect+ ]! c- ?1 T4 _7 i' t
: w8 R& n: A7 B2 j2 a( h" s+ G1 e for(id=0; id<numLinks; id++)
) L Q6 z5 ~& N I3 {
$ \! B- [( S i9 w$ K$ E3 f% V( k {
: g/ x3 O& l- A
7 x, r$ d" P6 Z, C0 E5 I0 Z t=setTimeout('startFade(' + id + ')', id*100);
0 C7 ^* R4 j% W! N$ i1 f+ h7 l( m6 y" o7 }" S
}
0 L& b( E0 Z- ^0 v* C
3 |0 U$ t% Z- j* m}. i9 B2 k9 [/ Q1 d0 G( k F" x
D0 o9 X/ W, |, m# x1 S, l//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
, \. i& m, N6 I* z) Z/ S; _
% J3 Y/ a* h/ @; S( ~7 m- CinitLinks('#FF0000', 6, '#FFCC77');
+ n$ m" r) V# {0 r
; q' p. [4 F# o0 y( m' H/ w5 f//-->
6 E5 {* m5 y" E
`# s7 q/ L2 k( J- n1 c M& M</script>( f! t( M5 D/ [' G/ c d' u
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元( W" A' Q# g/ w- P
</a>
8 b4 l( X S6 n<br>
. t0 E9 Z4 _4 f0 {8 F) X2 b<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
" D) p3 b. d, Y0 `% n<br>6 @, r# S$ c7 w$ \- x5 V$ \; S, |) S* g
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>8 f' i' V# q [5 q" B- [. I
<br> v) L6 Y! _2 B( N* i( e
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
: }" Q0 A* a0 @<br>
2 o! L6 A" m# Y, j2 h1 l- j<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>- w m% c- R+ \ @, ]
<br>' K- J- J8 N! p: \9 z: Q4 L7 C5 M
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
5 c& D: _1 J0 w% s<script language="javascript" type="text/javascript">! E6 i/ {1 A& {9 Y0 X! s3 j
<!--
1 z$ @1 J! G7 A N9 |* ?1 \ ?* tsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
F) ~1 X) t* W+ x* Q/ H7 r7 T+ I//-->/ T, `% F8 [2 O% c5 I
</script> |
|