|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">& v$ L/ T; X7 z# a) t
<!--
1 |; x7 n$ U M// convert a single digit (0 - 16) into hex7 n" Q& \8 W2 R2 U$ q
function enHex(aDigit)
( z9 r1 v1 u% D! k& Q{
9 w# r* n, z4 I/ T return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! X! Y8 }+ S/ ^) n}+ k& O* V* A; ]7 Q0 u( ^9 t
// convert a hex digit into decimal
" i' p8 F* L1 Jfunction deHex(aDigit)
1 b2 q! e: o5 y- }; K4 L/ i{7 v( F1 p8 L+ \9 w
return("0123456789ABCDEF".indexOf(aDigit))/ T9 j+ K* e" p0 Q) s
}
( A) Y! R# ]/ ?2 W. `: P6 ]5 P) T/ P: A" [& k* W! J/ A$ r
// Convert a 24bit number to hex/ n F# a A" }7 J2 N5 Q; m
function toHex(n)
4 M5 Y0 z r* Q( p{
; }4 y4 B: F1 T2 I) l# g return (enHex((0xf00000 & n) >> 20) + E S7 j. M: k8 u$ e# ]
enHex((0x0f0000 & n) >> 16) +; n9 Q; Z d2 s, V: H
enHex((0x00f000 & n) >> 12) +& q$ Q" k: s9 A7 p" I6 a; I
enHex((0x000f00 & n) >> 8) +
5 |8 b/ D, i5 R& Q" i' |4 j3 P enHex((0x0000f0 & n) >> 4) +
2 @# Z# m7 s! k enHex((0x00000f & n) >> 0))5 q# B! q) Z, ^/ c4 t/ \. F5 w( S
}4 F* p0 \. \% ~* T g) Q9 U
// Convert a six character hex to decimal# {- |/ `2 _3 i; n6 U9 o4 m
function toDecimal(hexNum)
' F' P. L- ^, k5 [5 x8 M' Y{
. E' q1 p$ p! Z, c5 O7 v" W var tmp = ""+hexNum.toUpperCase()7 H9 o8 K) s3 F. G% z2 t
while (tmp.length < 6) tmp = "0"+tmp
) [3 q; c! [! E9 Y; `- ~" v' W return ((deHex(tmp.substring(0,1)) << 20) +
4 [, k, m) E3 v0 n4 e# | (deHex(tmp.substring(1,2)) << 16) +
! u# j2 v# h! E2 F2 s, S4 u y (deHex(tmp.substring(2,3)) << 12) +
& J- {% o, ^, S6 H! n (deHex(tmp.substring(3,4)) << 8) +7 d, ]& J1 W* W$ w0 {6 G5 @
(deHex(tmp.substring(4,5)) << 4) +8 a5 @- e9 ]3 t8 I0 C
(deHex(tmp.substring(5,6))))
* b% B6 K! S) D/ d( o2 V}9 U& E# v1 [1 l. h+ {% x3 L% y
///////////////////Shimmering Links/////////////////////0 V G# q6 W8 u( m$ K
//global variables8 T: l6 M+ p- B& ?7 j* f
var hoverColour4 ~$ P- g5 P& G, B
var numLinks;
1 _- f4 X6 j- w, ~6 Rvar rate;
H# t9 t# K0 w" m9 W5 ovar numFadeLevels;- m m" d7 M' D9 h( ~/ k7 `
var bgR;
; J! r# A' X1 A$ [( Q$ f5 cvar bgG;( R7 b9 s5 T: m) c/ t0 z, r6 F+ u
var bgB;
, a( P7 H# f$ n7 b0 V. Ivar currR;5 T' q! R- J( _7 m
var currG;' t) r7 a3 i: T4 [ `, S& _4 u. t
var currB;
: n1 B6 J* k. H% z, rvar count;7 D+ f( G" z/ [
var fadeOut;2 {; y+ F6 v" w/ f, j
var continuous;4 \3 ~% S; X) `6 {
var newColour;$ d" l! w7 G, U3 @4 f* ?
var tID;; i0 O* K2 l1 l; ~( F$ Z3 X
var redInterval;
: ] o8 w. |; p, X8 l( k5 D- zvar greenInterval;
( o8 d) T( r' v4 o: S1 t* X4 Evar blueInterval;! J- n# \% z# z7 Y4 S+ U" p
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& \' J$ K( w9 i" Y6 g \% g* G* }{% [: B2 }8 `# L
hoverColour = mouseOverColour;! x+ A/ e0 V, E+ i E. d
numLinks = numberOfLinks;; v- T+ y) r/ f6 ~, t" f% b
rate = 1;7 a+ U! e7 t2 e( X. ~9 y; w2 i% D
numFadeLevels = 30;
: g- F) V |, S* {1 o2 { function initArray(theArray, length, val)1 u/ p! S4 y) s% C! s- U9 h7 _
{
* ~# W' K- k# a; S! P$ E for(i=0;i<length;i++)
) t) E$ D% U; d8 ] {
4 w% g, S$ b' C" Z4 B( Q- G, M theArray = val;8 I, u( G- i3 n' y4 x' Q( G4 C
}
) j) q& S' S9 d }
* z: _& i$ J0 K+ h( \8 U bgR = '0000' + fadeOutColour.substring(1,3)
" T- l" F" R" ^5 \9 |! } bgG = '0000' + fadeOutColour.substring(3,5) T3 j- S0 H3 E3 c" p* v
bgB = '0000' + fadeOutColour.substring(5,7)
) V$ r* B2 ?6 N currR = new Array(numLinks);! T$ A2 {- j/ q7 k" v% K
currG = new Array(numLinks);
+ N- U) ~ o% d currB = new Array(numLinks);
E) X \, U2 q5 D; B; t' N5 t count = new Array(numLinks);! T% v7 u& U* ]# ?& d7 D
fadeOut = new Array(numLinks);/ ~% L* b% a: i, q# p
continuous = new Array(numLinks);4 L4 V1 G! h1 n" s
newColour = new Array(numLinks); B; r' B7 w- @: C$ @7 D
tID = new Array(numLinks);
* Q; \, w5 o0 D, M9 J5 b6 l redInterval = toDecimal(bgR) / numFadeLevels;
6 @$ l* Y& N. G/ O' [' i: R) g greenInterval = toDecimal(bgG) / numFadeLevels;# r9 ~ P, a, U1 P, S
blueInterval = toDecimal(bgB) / numFadeLevels;9 s: {0 n5 E' \& B
initArray(currR,numLinks,0);
% \- { C2 S, X: n; f1 g; D initArray(currG,numLinks,0);
/ Q3 V' I% n9 z5 \! [ b! X initArray(currB,numLinks,0);( T+ E1 l, U. r
initArray(count,numLinks,0);9 [4 Z3 ~! {1 g" n! C3 F
initArray(fadeOut,numLinks,true);& [ q) l/ D$ a$ s5 m
initArray(continuous,numLinks,true);) P" I0 K8 O1 G3 ~2 M/ H
} . s! R. Y- B7 W$ x
function startFade(id)) v* T! j6 x5 Q. i( L7 s7 |. p: P
{: b% D1 [- s4 s% Z' v! b
if(fadeOut[id] == true)
( _0 p; j; T8 x* W" W* t { /*move colour towards background colour (increment)*/7 o( M: l# S4 U
currR[id] += redInterval;6 J7 b, _2 }1 H/ Y2 X) F
currG[id] += greenInterval;0 Z# A* d! I l7 s0 I: K9 D
currB[id] += blueInterval;
0 _: N& e h. R# v* z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
6 Y/ C3 p6 B3 w6 G if(++count[id] == numFadeLevels)# ]8 q% N3 t/ X, Q$ b
{
- `% v3 a( A3 R! n fadeOut[id] = false;
" q6 }! Q7 F& B! ~# F }2 E5 U% J3 h/ M1 q
}2 t5 T; A2 t& a
else
W/ J( i% @% l6 F8 J8 M( v% M {
$ o) M8 Q2 K8 y. b6 C2 h% e O) w currR[id] -= redInterval;
4 V0 J9 z$ W( N/ x. a
) e* ~ x% j$ A currG[id] -= greenInterval;
! q3 Y$ X2 h1 J6 U6 b8 _! H2 ^ e3 h. ]
currB[id] -= blueInterval;3 I- a2 L" { _1 d0 i1 A
. }( ~9 `& N' {% F. {
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 q+ v& O* \! n$ V7 U" z* i" A- b# g6 l: G' A- T U$ [ U7 d
if(--count[id] == 0): t" Y3 ]; a0 i- y3 J9 g
, y' O& n: L6 j8 r9 {6 {% Z {
" F: [8 e8 s9 T# C% G3 B, h7 Q( ^. E5 G3 k& R7 N; i. u, _
fadeOut[id] = true;( \. O5 h- q" y% Q7 y
9 Y$ `% R" z0 {5 Q V8 t }) ]. U: h9 o4 R3 K6 x% z+ {
3 y+ W2 `! e( h1 L
}. t- m/ @$ Y/ W: o' c1 {
2 H' [8 `0 x' e* B) |. b% E if(continuous[id] == true)4 p! o' C: i5 S* Y, k
$ d! \% M" a* U2 w4 B
{
2 q/ }# j! y% d Z+ k
$ o( `6 O% y' I# n& m9 ^7 X document.getElementById(id).style.color = newColour[id];
6 t7 E7 E) _) ^2 K: k& @- m! U4 U$ n f' l, v; G
}4 ]2 X# l3 [5 G _' G( m
) ]: l$ V" g1 Q* u else
/ Q2 R/ n% j, {) a, K% O- _
_) Z7 k' u |$ X- X" ~- o {
! S2 V/ C# F5 k) u
1 W% U4 l' D( W2 _) U document.getElementById(id).style.color = hoverColour;- H% D) O/ s o1 I
/ y) W+ N* N+ ]/ O6 a8 @/ F
}
9 l) h% u& q+ U) B( F, Y3 d2 v A) g6 L! I s* }; u+ q' s/ L
clearTimeout(tID[id]);
. u5 e! Z2 z! a2 { W, [4 E" w4 N
- D. X( {5 N' Q/ N3 K/ ~ tID[id]=setTimeout('startFade(' + id + ')', rate);
7 @, u) F2 V% P4 b+ n; v# Q& {; ~9 y& W+ I4 A; S4 i3 ]8 ?7 R
}
+ g+ o' |5 `: X* b& ~+ a- k. w: t% W' c$ \5 L1 s! \
function continueFade(id)
* w X$ ]; \# Z# i0 o% w$ C- w5 _
{; f, m+ _2 t: {) b$ b4 k
# o1 v) S& ?4 R continuous[id] = true;6 S+ u _3 F6 @4 j+ u4 y5 w1 `
9 |" [! p6 n2 y4 U}
2 B8 L9 G) h$ M# e, Q# B9 o" O
2 j* s+ X' |& p) b2 J4 M qfunction stopFade(id)5 j3 g4 P3 D# g2 B( m! z' P* S
7 A( k' O' d8 h8 q$ r5 I2 N2 G{4 v. ` K/ H) j1 {& B3 |7 @
2 n1 Y, @+ ?# Q continuous[id] = false;
P* [ h4 o% m/ }2 V6 T& M* s: m! c
) E* b+ j% F6 Y" s) F! }}8 ~) A+ D/ S+ q( p: v1 B9 d
% C; h2 E# q! ]6 Q$ p* k
function StartTimers()* I3 {6 O" x5 Z1 s5 h( `1 L, s8 ?( r
- h* K+ A( z; z& K: t/ P{ //set up an initial set of timers to start the shimmering effect
8 r$ U3 p$ G4 U( m
0 P' o* J7 E- H8 ]! d for(id=0; id<numLinks; id++)2 z7 \% |# C+ F" k, \9 m1 W, x' X9 ^
+ i- k# F# I2 h/ } {3 p3 m9 A& M$ \4 h
' a& U0 J q1 B- N$ {: { t=setTimeout('startFade(' + id + ')', id*100);; Z* Q0 l* \5 U0 s
. J$ u! ^. I( A3 _% |8 G }, _! {1 h% u+ O) @+ j. M
/ U6 i4 g S; g6 j$ d; u: s( A9 W
}) C" S& P9 f' v
- S' N6 ~; O9 q& w) O* T/ R//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
! u, U [5 R8 T a( I" q. J; x/ H) q/ T9 T: `% J+ h3 E
initLinks('#FF0000', 6, '#FFCC77');
$ X3 u2 S! _8 [: Y
) T* l; o: f4 j) j5 ^) p2 q, c//-->* ]8 `) f, d. r9 s: ?: Z
2 r+ @5 |% c, T; k, j9 B. m, J& S
</script>
" ^2 j B# V, @2 h- e<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
% n- e# z5 J/ x( `4 J. a</a>1 u: v8 G* c2 H. [
<br>
6 e2 i* H4 P1 |: U' _<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>3 Q9 v2 V: c' i( n) P* ~
<br>, _ {- j! j% v+ |$ ` o
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>& m& [; F: d5 P* A$ I
<br> 6 d+ {- c- K2 L; U$ V ]9 W
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
* I2 i7 p7 P1 E o<br>
3 g( L- }/ W/ ~<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
5 ]) u! Y! R7 @" O" A<br>7 n% m, u8 n1 P
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>' p: ?$ W+ Y) B& p- ~
<script language="javascript" type="text/javascript">
5 R/ w" B% ^# Y9 V<!--, r& L7 u* u! X* N1 j) @3 j* p
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
0 T% w6 U ~4 I: q& P0 _//-->
4 |$ ^5 g( a( |% g# e# {</script> |
|
发表于 2008-1-21 20:48
|