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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
+ i5 U" T( G$ ~, [<!--5 d1 `3 j, q: S
// convert a single digit (0 - 16) into hex
z: ?- p% y7 p4 ] u/ Pfunction enHex(aDigit)& R0 N" T5 [ k& {$ V: \+ t
{! J6 H/ S, f% ^) J( \+ O3 }
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
3 v0 A& C2 a5 M$ s: _} Q! D# B$ {6 v
// convert a hex digit into decimal
& V" y0 F2 {' u; D/ @/ [5 u& \function deHex(aDigit)3 e! G- D w1 ~8 _& e, j, w5 A
{1 V; y+ @. L. D: z' D; G
return("0123456789ABCDEF".indexOf(aDigit))
' I6 Q% ~/ S) W8 U# G6 ?( I}3 T5 h( W( J8 \/ q3 d+ I
6 K+ P$ z( K: I9 r( V& v// Convert a 24bit number to hex
' m: R- n' M: N/ U; |2 ]function toHex(n), u3 ]% C$ `$ o$ w ~5 y2 ?
{5 a/ n0 p! P8 v
return (enHex((0xf00000 & n) >> 20) +
0 }4 Q0 |6 U; J9 O enHex((0x0f0000 & n) >> 16) +
: J$ H, j8 q* z2 c* @! k4 v enHex((0x00f000 & n) >> 12) +
' n5 c/ T! j3 S; b/ S8 W8 R/ G enHex((0x000f00 & n) >> 8) +! r3 ~4 u* E7 x$ R
enHex((0x0000f0 & n) >> 4) +" M1 N3 J* Q/ m. |
enHex((0x00000f & n) >> 0)); Q! {" N7 z1 q# K
}
9 e8 j3 e; j! t9 n; J2 ~// Convert a six character hex to decimal
& f5 H0 V( v( ?4 N$ n3 _5 g; efunction toDecimal(hexNum)
1 t$ H" a& j+ Y! D{
0 e! Y! M: {0 h3 ~7 U; l6 D" e; P* d [ var tmp = ""+hexNum.toUpperCase(); _/ N0 _7 ?5 J4 Q O
while (tmp.length < 6) tmp = "0"+tmp& c1 t4 Z7 R& T. u- g3 i
return ((deHex(tmp.substring(0,1)) << 20) +
6 _! w& I+ F! K, S' G$ K9 j2 B (deHex(tmp.substring(1,2)) << 16) + / B1 T' X! z& h5 Y; D
(deHex(tmp.substring(2,3)) << 12) +8 d! N1 K! W- N+ w/ ^+ J( }
(deHex(tmp.substring(3,4)) << 8) +8 J6 i. ~. t! Y! S: }. I
(deHex(tmp.substring(4,5)) << 4) +* ~: O% l0 }( A! \
(deHex(tmp.substring(5,6))))
/ L* n2 K9 I P}# r/ o: E% e2 ^
///////////////////Shimmering Links/////////////////////- c) R; z- `& i% e
//global variables
5 m9 w! V4 a# ?7 J6 n' N tvar hoverColour0 c9 F' O5 V. t% B R
var numLinks;& M+ t1 ^( }5 M
var rate;
" Q( i W z5 R$ V3 d, ^var numFadeLevels;
- L, ?/ z* D1 Lvar bgR;: B- @) l& s; N" b
var bgG;* I V1 ~3 b1 D- l) }; r- @
var bgB;
, ?3 M8 t D1 O* W+ u- r5 p& Cvar currR;
. f/ \. m' |. _var currG;
" X6 e' X$ {( N- ?var currB;7 s$ b& O3 T4 D1 G4 K2 F$ [
var count;& u* s5 F( w+ l; D
var fadeOut;
4 r0 ]9 ~! |8 B/ @2 I& ivar continuous;/ m' [# {6 \+ O3 K2 @- Q5 m+ d
var newColour;" j. N& I& K" t6 l5 [
var tID;' J7 y \- g5 G' n2 ?
var redInterval;
: `$ `2 I$ z, y0 O2 ]% f1 tvar greenInterval;- F$ L7 L8 k9 h) W! L
var blueInterval;
* Y% H* L5 ]* ]% @+ D8 W qfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
4 o! _. Q5 K p# _- U! c{
1 g2 N' W5 a" F- J* ]" I* U( p hoverColour = mouseOverColour;
! k/ R5 h) O+ ^7 a0 k numLinks = numberOfLinks;
* D3 K# L8 a! p; t rate = 1;
3 z1 z, r, p B8 O numFadeLevels = 30;1 G b! m/ ]6 m+ g* q- [
function initArray(theArray, length, val)8 ?$ J6 w/ ~8 V" T$ ^
{
) K; `; q& [2 K- T& b for(i=0;i<length;i++)" U% G7 w- M7 X8 r- w6 U) z
{
2 a* e4 f3 N& y' g6 Q8 I6 J* p theArray = val;9 L: C" Y5 A: e% d; q
}( u; i5 @! J/ Z
}
- b% T. @- F. l5 |' S bgR = '0000' + fadeOutColour.substring(1,3)
0 {4 g" g# _) T) Q) t# W) n bgG = '0000' + fadeOutColour.substring(3,5)! I8 i, s" E+ h% K) ^
bgB = '0000' + fadeOutColour.substring(5,7)
8 V' x, d0 H1 ^- v" T: B currR = new Array(numLinks);. A9 o! ~4 Z' a, J( ~ G, |2 u+ l
currG = new Array(numLinks);: }1 L' @# H; b9 g& p) t0 h
currB = new Array(numLinks); A `1 T6 c8 ^6 j1 V$ E& E l6 r
count = new Array(numLinks);
! |0 ]0 c0 S, X4 b fadeOut = new Array(numLinks);
% l2 {8 B9 D; Y' T" V; C continuous = new Array(numLinks);
1 O9 r; z/ i p newColour = new Array(numLinks);
1 |* [1 H3 ]+ B E8 G6 G tID = new Array(numLinks);2 K9 z1 T7 Q9 s; E
redInterval = toDecimal(bgR) / numFadeLevels;
& ~( p& g- n1 b+ I; ~3 N greenInterval = toDecimal(bgG) / numFadeLevels;1 i7 Z& M$ G8 t7 `
blueInterval = toDecimal(bgB) / numFadeLevels;
3 I! P3 n8 @/ B5 U# v0 i initArray(currR,numLinks,0);
! N% B* s- ], p+ G: O3 e" s( q initArray(currG,numLinks,0);
: h. P5 c& Y% i B* V! b initArray(currB,numLinks,0);4 \9 c' k7 y2 Z* H; Z
initArray(count,numLinks,0);
2 ^7 e" I7 b+ C. `& A5 t( G initArray(fadeOut,numLinks,true);, a: H3 l. T, B
initArray(continuous,numLinks,true);
/ }( `" m2 Z+ g6 R( x} , a4 k) q; F5 z: Z
function startFade(id)' | {3 T. I% J" [2 O/ _2 W
{
$ W+ u) W4 W m if(fadeOut[id] == true)
- x# L/ b# q" @ { /*move colour towards background colour (increment)*/$ [+ Z @2 u/ V: w9 h1 [4 Z* S
currR[id] += redInterval;* J& u5 j7 M2 U; P
currG[id] += greenInterval;
. T2 X# x+ l2 M$ D+ o0 D! U currB[id] += blueInterval;7 M: P9 W [+ y- A" g$ y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);8 o# l6 X$ F+ [. U) S$ m& e
if(++count[id] == numFadeLevels)
% i' z: }" b( Z# `6 Y5 G {- _9 j' J, d+ [# f* Y1 s
fadeOut[id] = false;. u# @" l- m# v; S- @$ c- u1 b
}5 w2 S* r! X7 c5 m7 O
}
4 r9 r- e: N# f7 v3 u3 Y else# y2 J4 Y& O) W8 Q: y
{
9 v$ V2 W0 A j0 y currR[id] -= redInterval;
5 W9 j# o( V' q% c, R1 R0 I# ?7 E# N q
currG[id] -= greenInterval;
& G8 n0 L( Q8 x8 \, h. Z0 b, S* F/ H$ @4 V1 e/ U6 ~, v4 G
currB[id] -= blueInterval;) d6 T% t# x6 } Y
# Z. ]/ N, `- f4 y7 o# z- u newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
) ?# J. b' C( W$ e1 p
6 r9 M) m# q2 c( w5 Y; p if(--count[id] == 0), i) Z# v5 Q+ |6 o
8 j! O) ?! w4 K: H) { {9 U$ e `3 Q6 W0 z9 [
0 s: X+ V8 }( u4 }6 q+ X1 U* D fadeOut[id] = true;
- |$ O, |8 w, E) F o+ a5 _' L7 \+ Y' U2 p
}
3 a' N2 s1 D5 w+ D9 X) p3 k+ R" q$ |( @ V) s5 u% \4 C
}
- N j& i. K6 j# f
& K5 ?& V0 T9 `& X if(continuous[id] == true)! z a3 L' p/ R4 j9 u
; |8 Y5 c O$ p! [( s8 k. |, h) n {
- k7 V8 H% n, V* G1 h/ F, r
- l5 F3 C- x0 _6 |# a; d5 { document.getElementById(id).style.color = newColour[id];
4 z8 T$ |6 O# b" a- m: a& f7 A7 h7 {& n) o
}
9 U' j- u* Y, |& g. e. }6 \4 ^: I# w2 G' _- S5 z
else
0 c4 `. T: m( Y# e% L3 z9 W' C* u9 _4 C. w5 [3 L" h9 d
{
# d' c+ m* ` c3 @0 ]) X+ d6 @0 h
$ Z5 g' Z3 L7 I! n, V M+ W document.getElementById(id).style.color = hoverColour;8 b; P* v. }5 y, a. Z
8 J; h7 ?, m( S2 ^2 |& B
}
6 \' M+ Y. P% u4 O- [
: A/ H: J6 d* _3 i, Z2 a clearTimeout(tID[id]);
/ a0 i+ R. L6 ^7 o) j9 A0 Y) z$ \2 [; }+ t5 O8 n4 `, @
tID[id]=setTimeout('startFade(' + id + ')', rate);* Z- F$ I1 X8 g$ N. @
! a R) R' `% G/ v}
. c" U: O s2 W* M ~
. d2 k* `$ Z, K6 W' ~) ~7 \- C' d& qfunction continueFade(id)' e- j4 D3 Y7 n" R+ s* Q
& L2 Q. v }' F{2 B- `/ V4 z5 C# N( u* N, H3 j9 ^
2 u7 ?. i5 z1 Y' y) Z4 P continuous[id] = true;
' S- m2 A% O' \
2 }! Y8 F! `; Z+ k' I4 K& P}1 w/ s e2 u3 r! x/ W3 a( I7 I
8 d( K# s( ~! O5 D+ X4 g* Vfunction stopFade(id)
' F }3 l# w! l% l0 u8 ~! N% D, C7 F: j. ^8 Z
{4 j" B5 F$ ~+ v5 U: K
|: Z, h$ V* Z8 @) C
continuous[id] = false;
* Q$ N8 x6 }# {- _$ W# F; s q( v/ b# N
}
: y. s1 c% U8 D# R J+ D- e5 T& w6 M. P, M
function StartTimers()0 }9 A( @2 y# j! i: J
1 z/ j. W& s& O0 F) U9 O9 o
{ //set up an initial set of timers to start the shimmering effect8 P- r& ^" R$ n6 P! W/ c8 v' W
* Y8 Q+ P9 i$ E for(id=0; id<numLinks; id++)
) A+ D+ I6 ^( i1 Y6 `
" t% M1 L' g, t% X {
5 ?8 F) A1 e! k- H$ W
& h3 b/ D6 L3 R8 r9 f( `1 z9 \ t=setTimeout('startFade(' + id + ')', id*100);
) ?! D1 \, `4 G; y
1 I$ ?9 [+ s+ o% N( m0 m. \* J } v. c! `, \4 L# B' p2 i% J) ~) k" c# u
; S/ V' ?% g6 j" @
}$ j5 K/ W- i2 J! H! @
0 [3 K3 @+ T: ~4 ~, ]( c, ?
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')7 q6 E- ]3 ]7 J9 n- Q; E p8 `+ T
. B$ o2 n( B ^; {# |
initLinks('#FF0000', 6, '#FFCC77');
: {+ o; K& G$ X, `7 U1 r: T. s! H
//-->9 q! T1 O4 Z. L% r" l( x
; ?5 j: k, [+ G, f. i3 o( t% [</script>
* S# G* m) l- Q4 S% o7 A<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
. \& s. g8 J5 `" m</a>$ }, [' ^! y& Z2 o! Y
<br>
% z+ {) {! m! r6 ?8 o' x, O$ z<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
4 z; ?) ^% @% j: x, p2 K<br>
4 b& I# u! c" m+ ~; a$ B3 ]1 A4 b<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a># B5 C. x: @# y) A7 w" u Z
<br>
% t/ K5 s6 P o<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a># q$ o) C& ~" A ~+ ]
<br>" o: `7 {) ^5 Q& x1 n
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
9 K$ _( R. @* P/ b7 t! b8 c* _$ W<br>! ]7 m7 d" x) Q
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>! k1 v6 r: x. s5 |
<script language="javascript" type="text/javascript">
. q7 o; e: B9 J u8 R& w) p* s<!--5 D3 m; |$ M# M# ^8 `1 s8 t
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering* J- S8 F* h6 F
//-->
+ R! @. |; s0 U! C</script> |
|