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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
- h, a1 y) v K9 J<!--
) X% V3 X9 ^1 {2 `// convert a single digit (0 - 16) into hex( K! p, L; [& w- }$ T
function enHex(aDigit)
( H7 G+ h O: U: G# S{. v9 Y7 q' ?9 x4 M
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
" H) B4 {6 p4 [' Y% i) K) \}- p0 l5 M& M3 S8 z& p7 b
// convert a hex digit into decimal0 E, g* e" s- S* S
function deHex(aDigit)$ `9 m2 [! K& q! X f
{
: w: g+ s- L- s ?) m return("0123456789ABCDEF".indexOf(aDigit))2 B P6 n$ Q/ p0 \
}, }' M7 j- F( b O% U# o" L* \2 A
/ z5 q) L& o! z7 \- K// Convert a 24bit number to hex& k" C7 J1 `0 ~- I# u
function toHex(n)
" O+ R. Y( v7 f1 A{
E A$ ?! j( `4 T* c; E, Q return (enHex((0xf00000 & n) >> 20) +
5 C; B) w. ~" d: a* y2 A" _0 _ enHex((0x0f0000 & n) >> 16) +
1 o: c4 o! K/ d/ q- N* Z. N enHex((0x00f000 & n) >> 12) +
5 p* [9 z9 e4 K- j1 ?7 i" c5 h enHex((0x000f00 & n) >> 8) +
3 y1 r$ R5 R) a* S enHex((0x0000f0 & n) >> 4) +
( n) o: f+ F' f0 R, U( f- G2 G enHex((0x00000f & n) >> 0))
9 e* ?- R: L3 g1 K, _' ^0 a. \; \* b) }}8 {! d% c7 L$ r& i& ^
// Convert a six character hex to decimal+ S4 |& V$ Y+ j0 m$ [
function toDecimal(hexNum)
4 V' Z5 t }" u# [$ D: v( H{( d: I; Y9 C! @: U5 j$ D! O
var tmp = ""+hexNum.toUpperCase()
. M+ x7 k- t9 y& `1 d while (tmp.length < 6) tmp = "0"+tmp
1 n: C8 T. ~, v3 z. }& d g return ((deHex(tmp.substring(0,1)) << 20) +5 W9 B' S* ~# q7 Y
(deHex(tmp.substring(1,2)) << 16) +
; S2 p5 a& U- ^0 U (deHex(tmp.substring(2,3)) << 12) +
# }8 H# [9 I" Y (deHex(tmp.substring(3,4)) << 8) +5 i1 _$ q6 e( M
(deHex(tmp.substring(4,5)) << 4) +
3 O9 S, z5 V# H% z9 O (deHex(tmp.substring(5,6))))& z6 D5 @; y8 X" H _
}
7 y- `$ S5 {1 c3 e/ ~///////////////////Shimmering Links/////////////////////
8 [5 x$ f3 A$ G//global variables5 e: d" t3 D! [5 n; i, D; O! x3 K
var hoverColour! q6 p5 Q, K8 \
var numLinks;9 A: l( Z! F6 q1 o) r1 W
var rate;
. t% P% x& ~; N& S$ }0 jvar numFadeLevels;
5 _& I1 m/ G3 X( ~3 Pvar bgR;
% y5 X0 G9 s3 S [var bgG;3 ]. t7 }) }8 B# ~
var bgB;
2 d2 N$ V. k# S& [7 Y& q) d- Yvar currR;
' a- c' g5 `* f1 t2 Nvar currG;
+ B" N7 j0 D, a3 w3 z4 ]7 fvar currB;2 t! L3 C; p9 D$ K8 p
var count;# N S7 c& t' H4 ^3 V0 t6 _
var fadeOut;
/ M) U1 c" |% f+ F$ h1 ?var continuous;4 x1 B- u. _6 t' V6 L& \* I
var newColour;% F6 ]# _) H& w1 f, J7 B: |
var tID;7 `) t! A" W1 r
var redInterval;% A, P( w8 N( @5 |5 ]7 N
var greenInterval;. t9 ]* r$ R) c* a
var blueInterval;
# a9 a4 |6 [8 F2 @% n9 V2 l& Ufunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)7 m& C2 ^- `# a# f
{ q; a" e% }6 f
hoverColour = mouseOverColour;
+ S$ J3 @4 C2 A2 c& z0 l numLinks = numberOfLinks;$ {3 T* W# s9 o9 a/ M$ c
rate = 1;
* p, G( k- K, j7 X numFadeLevels = 30;
& U- m% [6 w- j8 C! f* { function initArray(theArray, length, val)
! ?* f: f1 X4 S/ o, w9 d2 n/ U/ o {
( k- W9 T" B* q for(i=0;i<length;i++)
* d3 b* o# @' a5 P; v {( ~2 r6 n( s0 v( t" F& O
theArray = val;
: G( f' I; W7 S/ K }3 l& b3 y/ S. c: E7 D
}$ Z- p: X$ o7 C' j& @& z
bgR = '0000' + fadeOutColour.substring(1,3)8 z+ G; u# @7 c( V3 B. A
bgG = '0000' + fadeOutColour.substring(3,5)/ z! G) l7 E) Q2 U: p7 ~
bgB = '0000' + fadeOutColour.substring(5,7)
# p. ^3 t' }$ }6 x9 m1 j currR = new Array(numLinks);
2 i/ D ~4 k& X; g, e; J( q currG = new Array(numLinks);" t; k+ a- e' [- y# E" l
currB = new Array(numLinks);
0 j* d3 R5 U' M% L+ n; J3 Z1 O9 ` count = new Array(numLinks);
% H# K) }& g& r: v, G fadeOut = new Array(numLinks);; u* c, N7 ?) `$ R
continuous = new Array(numLinks);
, R w- v3 u, k; Q7 b newColour = new Array(numLinks);1 s1 a8 ~9 Z3 k) J s
tID = new Array(numLinks);+ D, m7 s8 C& B: Z( F# P
redInterval = toDecimal(bgR) / numFadeLevels; x3 L& D! {3 i# T
greenInterval = toDecimal(bgG) / numFadeLevels;& j# {! J, P0 ~1 ^( F3 T0 T, J
blueInterval = toDecimal(bgB) / numFadeLevels;
$ g$ g' Q4 X* T6 s2 r& j2 I% F initArray(currR,numLinks,0);$ L* d1 e' | K3 Y; K
initArray(currG,numLinks,0);- Y$ J* p: A" S: ~- R
initArray(currB,numLinks,0);
* a5 W9 I* |9 G- C' x initArray(count,numLinks,0);! L3 S6 [7 t( F% e d# g* B% u
initArray(fadeOut,numLinks,true);
1 e2 S3 O$ \! N. j3 x initArray(continuous,numLinks,true);) E! @8 U$ r& Y* Q0 N' f) u
}
, P( u0 J. F+ g8 d, Z: kfunction startFade(id)
5 J; }# K2 O1 c8 ^( O, ~ F5 \{% d# h9 G5 K! O* R0 ?$ \- |* _$ Z
if(fadeOut[id] == true)
0 r! F; @2 M! L/ F( \ { /*move colour towards background colour (increment)*/+ p% L8 |6 g% U
currR[id] += redInterval;
. d% l9 A/ a' x" A( z9 t/ F- y currG[id] += greenInterval;# O" e4 G! `' Q+ k( j: x
currB[id] += blueInterval;; _8 ^* I6 X7 M8 D
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
- i2 c) ~+ C) W* T; Y if(++count[id] == numFadeLevels)
# B% i0 [1 H3 K8 m {" j- ^( F4 I5 s$ d; D
fadeOut[id] = false;) N1 `) |/ Y& L7 G
}
% T1 _- e6 k: A/ A }' G! k% P9 M8 J; l8 q) u! ^. P
else
% G; n# P/ r: z. J" ]) ~ {
2 A* O5 @, S/ g* C3 L8 p currR[id] -= redInterval;1 l ]- K: _% K% \) Z3 @
+ R/ K3 Y& w+ U1 e! r currG[id] -= greenInterval;' ^4 n2 a5 r9 T/ Q
) z9 x; L* W: }2 i currB[id] -= blueInterval;* k& g* ~# w- w, Z
/ v4 r9 _* ]7 U! j newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
% E3 x4 _, _" B9 d+ V
& w' Z8 J$ c' b/ d if(--count[id] == 0)
" q! {6 p8 G% l( Z+ t
* T4 R* i5 s `# v4 h d" M) l {5 w( `! k% U e* l8 `) M9 e1 o% z
8 Q6 b# ^+ i' c fadeOut[id] = true;, g( d# j+ V) m$ K5 V& \
% e3 \% Y* V; z' X3 e/ u }+ v. G' i" k! E# K; O% S
8 ]4 _4 ^' h; s& L }
9 @5 |0 |2 o, d
3 m# Y. O& M/ w4 ~9 X3 [+ l! O if(continuous[id] == true)
! U7 @+ L6 e0 K P5 y9 }; M! P" b1 z) Y+ z9 g7 R$ V! |4 E
{
* C" b9 Y+ j/ U: R$ ]! J, Q- G. f( ~# @" Y4 g
document.getElementById(id).style.color = newColour[id];
: c* F: N# P, t% `! L2 q; ]5 K- X, R9 `* }0 z9 T- C% s9 E
}, c2 ^! } q; T9 H9 O: c0 @
% P$ i# Y7 ?2 n( J: E5 r5 o- }
else: W% _0 e' n" z4 C. u: T$ E
" y5 h) @% |6 s) Q" m9 M
{ k; `2 W1 z4 ]/ R8 R( z
" a$ d- W/ k; h, u
document.getElementById(id).style.color = hoverColour;
' A* y9 N' r. R$ D5 ~
: E M! t7 B4 e! A2 g+ H }
1 L& ^# h/ q2 G$ g2 N1 H" ]4 g7 H3 { L% Q
clearTimeout(tID[id]);4 H, U) s8 i9 k# o4 ?, j
3 `: M9 c7 |% s& `% G- i tID[id]=setTimeout('startFade(' + id + ')', rate);
* l% h! R3 X3 G2 p' c2 ^& Q5 J5 w/ [" n, s# ]/ ?
}% p( p1 q: J" p9 o
' a; k. _4 U' [; X1 y8 c6 ?. N5 Hfunction continueFade(id)
- Y* B7 D- b; S1 E2 v. V
. I0 A8 ?& k+ E{. @) _0 Q8 }* G
5 A+ E/ S* U" o! C8 l
continuous[id] = true;
" h% \1 ?6 w" w D+ r* O( o% I* ]( a1 a) g5 T, M
}
% P J( ^: Y0 L+ \5 W
8 e( P0 U$ K' h- g8 ?function stopFade(id)9 q# f3 F% t/ R0 v- k! O* {
) `" m' G; D% b5 E! K0 d, c$ B
{
( p& A4 c) I3 g2 n8 P
8 V3 {3 ^. f1 D6 Y( J continuous[id] = false;
/ d! x5 s2 c# w1 N9 {2 J( M E2 W! t/ m. L, b' K0 F
}
3 w5 S* K U* \0 W5 Y+ E( J; Z8 X3 C, ?
function StartTimers()( N" d# U/ B( w
) A; U# X7 u9 m' d4 K S8 v
{ //set up an initial set of timers to start the shimmering effect
& V O5 ?5 u5 C5 h! A: o
0 q1 Z; k& k u. I for(id=0; id<numLinks; id++)5 W! p( J* O/ U3 Q4 \2 [# r! l
# T' O, c3 `& b9 C2 z
{
' b( l$ i( N, `9 n3 f
* B" ]4 ]- i) n6 L/ l% V, ~ t=setTimeout('startFade(' + id + ')', id*100);
- g2 M3 Z" A$ J! m
; u1 ?3 h$ f% F2 Q }
. c; [, j4 [2 v" |& x9 W2 S
+ ?& l& w+ k! |; B$ D* Z) C- J}
4 B1 O& l: [) D( F
) |( y' _2 w) i3 H( G* f//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
7 J9 v4 a2 M+ J$ H; V! |" w
+ K* n; E! o: G2 d# ~initLinks('#FF0000', 6, '#FFCC77');, u) H+ J7 }$ Q z( f, v, H
% V# v* Z. v7 s6 D5 B
//-->, V2 l- Q8 F/ w1 x+ f' a* D- C" G
$ {' Q% N; F8 g3 |4 ?7 J6 x
</script>4 J$ J/ f* }2 u; |3 E" Y" f
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
2 O& u8 {- p: [+ R/ j) J! F4 }</a>
/ g# ~# w/ {; E0 Z<br>$ X5 g3 M2 w& C' o
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>' j$ S. G" d' b$ v) e
<br>
* Z2 y) \9 b9 j' [1 ?<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
* E! \! c# b/ M& i# U<br> % M( Z' U1 l4 ?
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
% y! ~( r2 g" D7 Z& d<br>3 J8 {# v) X: ~9 W |
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
$ z2 P! g6 u! V! I<br>1 v& p( N$ P- g2 r' ?5 L
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>4 e3 n# a0 Q* l3 q6 E9 ~
<script language="javascript" type="text/javascript">( c9 a/ Z4 O1 _. v
<!--
+ {! Q. P0 Z8 s& f9 `4 r& PsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
+ e4 `& ?9 o% t4 O7 X//-->
7 `0 X3 h5 Z! o+ [</script> |
|