|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">( Q% V. m% w" X. _+ [2 L+ G; C8 B
<!--
8 L+ ^0 }& ^& g3 l# ^8 w// convert a single digit (0 - 16) into hex+ A/ T/ S8 l8 R# k. P' U) |
function enHex(aDigit)
! o0 r' {" w1 D4 l{
; U7 H6 P6 z9 r4 E8 z* ~ return("0123456789ABCDEF".substring(aDigit, aDigit+1))
0 c3 o3 ]& Z$ v+ ~) W}
# ^7 c' l2 H9 G9 V4 k5 K+ H: P// convert a hex digit into decimal% ]: Z+ H6 e& h; _# t+ p
function deHex(aDigit)
: C q( h/ l' B) S( H. |5 i{
3 p L" o, x( y E1 t. L return("0123456789ABCDEF".indexOf(aDigit))
2 Z- x+ H4 w4 ]1 C+ A/ s3 r}
7 s1 A# P5 L! b* W+ X
& ], Q) ?2 h3 V! A% e3 K: I5 B// Convert a 24bit number to hex; }% l. n1 f- k, |
function toHex(n)
B* l, |$ R% k) H0 s' {4 y{
! s) C4 y% N7 Y0 T3 e return (enHex((0xf00000 & n) >> 20) +- c' t' U8 h/ T
enHex((0x0f0000 & n) >> 16) +# }* i) J4 B# y n p$ p1 I
enHex((0x00f000 & n) >> 12) +
+ h0 j6 D+ x V2 v3 ?1 Y enHex((0x000f00 & n) >> 8) +
4 }# c9 |. V& n3 \4 Z! T: v. h enHex((0x0000f0 & n) >> 4) ++ x8 |+ n1 w% {
enHex((0x00000f & n) >> 0))
, ]- c# r s' `* N/ ]2 E: A}
( e+ }; m. G' D8 X9 p" q5 ~! g// Convert a six character hex to decimal
* ~9 y, T* m d8 _+ U ~function toDecimal(hexNum)
: n$ ]; N6 j8 g' R{$ Z. Q% m& b) y2 z
var tmp = ""+hexNum.toUpperCase()
4 l4 R- ?0 `, E7 J# H. h. G while (tmp.length < 6) tmp = "0"+tmp
6 J& |! L9 e/ @ L return ((deHex(tmp.substring(0,1)) << 20) +
1 ^2 P$ A# ~+ }. I* ^9 J y7 w6 p: K (deHex(tmp.substring(1,2)) << 16) + . y L5 E' v) l# p! ]: [
(deHex(tmp.substring(2,3)) << 12) +
. e: P) Z8 \7 d) W4 F (deHex(tmp.substring(3,4)) << 8) +
0 @6 U# X% i9 u1 d6 D! S (deHex(tmp.substring(4,5)) << 4) +8 }; ~7 I a% ~: { c
(deHex(tmp.substring(5,6))))- }* K7 T: Z! `, i
}
: U3 E& c: X( A3 j! b///////////////////Shimmering Links/////////////////////
9 @- R; B) g, q4 F# |8 t//global variables3 u: |, s! E8 s7 ?
var hoverColour7 Q( W/ Q) v" ?2 u- |. b; L' U2 E+ E
var numLinks;- I& L5 W9 \: E$ K$ O& L7 X
var rate;) I1 G) S _- L" A! @8 T3 V& I
var numFadeLevels;* e$ U* U! E& U' u# O( V. r
var bgR;* X8 q, u7 n$ ^3 Y$ s
var bgG;
! D6 S9 [2 T3 f% `3 N* G! u3 Jvar bgB;
$ ^. H4 C1 F5 l( ?var currR;+ m. Y. ~8 d; z7 Y( I/ z2 S' `$ K
var currG;3 z X# o3 Z6 l8 d; e
var currB;
3 G: k: c; s; W- Mvar count;3 e0 A: f6 y7 x) {) P# ?+ ]
var fadeOut;. B4 o# v2 ?8 P8 |" j
var continuous;1 f3 n" y% C! w) B$ o
var newColour;! ~! ^ T% N( e+ v
var tID;
{- _. T) z7 ?/ X+ U6 r4 Nvar redInterval;# e; R' B G3 R+ [3 V; n
var greenInterval;/ g, m# t- }) V3 t s3 j% L; p' v
var blueInterval;
7 c9 B f5 D' d5 T) O' sfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)* D3 Y) s1 Q9 [1 j
{5 j0 y/ Y1 s3 |5 r& u: y% t# Q4 C& `
hoverColour = mouseOverColour;# g0 B( M4 y! W, V# B5 n) o7 v! x2 j
numLinks = numberOfLinks;
2 X# C3 W% k( q rate = 1;- n8 t% v% L# k2 C {
numFadeLevels = 30;
% t% J% |* A! i. u2 }# {, L& s( _ function initArray(theArray, length, val)/ b( x' E3 w" \# m- V9 u
{
2 k3 ^9 O& B& I1 B for(i=0;i<length;i++)+ ?# ~: S0 y! Y+ a9 X' s0 p
{# l. m3 W- ~- P- d
theArray = val;2 H0 ~, \! ^; I. Y
}- E" d. z( C% K" U, m
}
. B5 w2 Q( f& U. Z# [ bgR = '0000' + fadeOutColour.substring(1,3)
2 ^6 ?2 }; v2 z! u3 E% w bgG = '0000' + fadeOutColour.substring(3,5)
7 o& d" X. u5 K, ~# |) k- y' p bgB = '0000' + fadeOutColour.substring(5,7)( J3 _: l& w, Y y
currR = new Array(numLinks);/ R: a7 h/ {8 h4 c/ t
currG = new Array(numLinks);
* p3 o3 R; g7 G/ g6 j7 r/ _ currB = new Array(numLinks);
% ~, r+ ~ R* K count = new Array(numLinks);
% X8 x0 u+ K0 S fadeOut = new Array(numLinks);
4 c5 {2 g: `: m' _: g l6 ?; Q continuous = new Array(numLinks);
+ I7 C$ t l/ r5 C0 T# j" |! i newColour = new Array(numLinks);
0 Y. x1 G- P6 z/ z tID = new Array(numLinks);
" ?5 O+ M, Q/ x9 ]( [- u- J redInterval = toDecimal(bgR) / numFadeLevels;) _0 |0 n5 D* b# k- |% j. T# F) ~
greenInterval = toDecimal(bgG) / numFadeLevels;3 m' n1 J6 y$ b* V3 p# M7 h
blueInterval = toDecimal(bgB) / numFadeLevels; @' a2 }- x/ Q. x) O: I
initArray(currR,numLinks,0);
3 D/ u& y5 N! I+ |, x& ?5 k7 w initArray(currG,numLinks,0);
3 r) c: O$ U% D5 U; O initArray(currB,numLinks,0);& n6 q7 \2 _$ q) j5 x- W
initArray(count,numLinks,0);, }- b; [8 Z2 T; @
initArray(fadeOut,numLinks,true);
: r+ t) }: D1 {- \$ e initArray(continuous,numLinks,true);
; E& ~/ F& X4 \}
9 |, t1 L& M9 d2 E. W% w+ lfunction startFade(id)
- Z" u; l0 G2 Q& h5 Q9 v5 T! g" g{
+ X6 G& \8 |' x if(fadeOut[id] == true)
3 g% Y1 \0 g5 }3 v) } { /*move colour towards background colour (increment)*/" K2 S: I8 G0 d$ {0 G- _! W
currR[id] += redInterval;
7 Y2 S _# J5 \- x! a! w+ B: ?4 | currG[id] += greenInterval;3 D/ z2 ~3 V1 X8 w" N) b( J
currB[id] += blueInterval;7 v: h3 d5 `+ x {8 q* C C
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);( f6 m" n. }2 q8 @9 ?- E" n! t
if(++count[id] == numFadeLevels)
8 w* ]1 U: }# ^9 {" ]! k2 y {
0 Z1 x$ P) }8 q# I" R" R- A" h fadeOut[id] = false;0 G2 S" Q# l6 w; n6 }: M
}
& J3 Z) G1 }4 l" Y }
+ i3 v* L# O+ H! T3 @6 A/ O0 ?( g else
% t/ ~1 ~5 Y( u+ E) T {# u5 L" W: p' F6 d* {7 a! ~
currR[id] -= redInterval;
1 I- |& ^5 r( V2 T4 M3 i# V7 R& K2 w: r8 @, b- ~1 o! Y4 _
currG[id] -= greenInterval;
3 `: x/ D6 k3 o$ J& T J$ @! v. v9 g" O
currB[id] -= blueInterval;
6 |; r* X% @) g. _. u7 H1 J, H
1 ]+ G* Y3 V+ a' X/ I. k$ I/ f5 I newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);" G5 K7 _) @/ y9 l1 C M7 L6 e/ l
( u1 R, e2 O5 ^, x6 L1 K% b3 m
if(--count[id] == 0)1 u8 q4 \6 ?# {1 @3 i" }" j1 y% `
d6 _! K; j- H) y7 |) z; ]; U: Z$ c {
8 f( {; R1 U8 D0 Q/ w4 @: K
1 b- Q# k$ A+ i. _9 b& ] fadeOut[id] = true;4 w3 C8 G2 C% g
3 P; R, S) X+ W1 t, L7 k
}
3 o1 D( n1 j6 ~' G$ T* i" g7 q
}( u' S& t' k' n# Z2 F
; T8 ?+ h' t$ u- `6 D7 P# |: m
if(continuous[id] == true)
. E8 j7 w! J% d, k* @- `, B0 F: i+ I1 C2 N6 U; k1 c0 K" ]
{
1 I' h( @; s$ _& I9 S4 s* \3 V K# S9 v9 H" ]* K# R" _
document.getElementById(id).style.color = newColour[id]; ( q, O( T6 {% ~, E3 [
7 {5 b/ F! ~' l( t; `7 J" `8 |
}
3 X! ~( e$ I; w% s
$ u& Z1 s7 F1 Q0 a2 o% v6 b else2 U" K& O* F: S+ }( U: i+ ]/ @
$ W& Y# F2 x/ i+ }+ K$ Y
{+ a2 G* r4 b/ p' N; ]& P
8 I* D. W" E' S5 u document.getElementById(id).style.color = hoverColour;7 V( z7 ?& H: V: I& g* M) u7 q
0 x" P; K) ~" x4 c/ J }: e7 W+ ]$ f! S3 b* I) |
6 |% J. _. _! T# e: h1 u% v
clearTimeout(tID[id]);8 z+ F5 `* f) C
/ ?7 Y% Y7 v/ ^2 {! K+ ?- X2 ` tID[id]=setTimeout('startFade(' + id + ')', rate);
7 }4 H/ r/ q( y: J6 b' @1 y& l3 Q: h# i7 ]! o2 h
}
1 d9 `' o& y+ T+ ?/ K) v1 X0 ]) w" {. D
function continueFade(id)) A9 d) Q3 A/ f' b
, H7 q2 L7 H1 ~1 F
{3 E8 M0 \' C! g, [9 }0 H5 o0 R
, [! ^" W8 ^; v continuous[id] = true;) {8 |5 m& u4 |1 \
# L+ d. R6 u4 f1 t: l8 ]& k% C
}6 P4 f4 ^/ y4 T9 _
% V0 P1 o2 n2 }# h
function stopFade(id)
- N( [: I5 b' I; f$ F; |# @' A: f
: f9 q. O, V5 W; A* L5 b{
3 ^6 Z, B8 Z7 A
, E( m" q$ w- R1 F continuous[id] = false;& N$ i/ p6 B* Y! M8 U5 R! p
! U4 ?; W: }7 H5 D7 q}
8 D, {6 {" M8 h8 o& p
8 E* J9 E! i8 }, j; V8 I9 j5 E7 ofunction StartTimers(). O: _/ I8 h5 ]0 S- g
o7 u# ^7 \, t
{ //set up an initial set of timers to start the shimmering effect& C' g7 G% x0 n% H) T3 Z
* C- y. j: c- M8 ~2 S for(id=0; id<numLinks; id++)0 i5 X% e: Y# N+ [
0 K. E& e" l, N- J
{% i O- T" }: | g: W
9 w. j! M! w% k$ D! `" { t=setTimeout('startFade(' + id + ')', id*100);
9 t( O' I+ i7 V5 X: A; [: {( b+ t) N8 U
}( C6 e; H5 U* q3 H4 }9 i
1 R$ W2 ~. O$ L9 c3 u
}
1 i9 `( u+ U# w2 c
8 }2 d3 b2 s+ e! c//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')6 r: o- S J* W. x. q. a4 M7 q# J
. k! f- @9 V( H/ r0 B
initLinks('#FF0000', 6, '#FFCC77');
1 _4 v' k1 x$ U
\# X- k- e! g4 W- {//-->
2 _( ?7 n2 g2 r5 ]
: C# x8 V$ a- i' [</script>
# y+ T1 Y9 N8 G, u. p<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
( _1 C1 f) K _( _' A$ c: M* C</a>
7 `7 [3 P; H/ Q; P) \8 z<br>
) j1 n& S j: z' ^& I6 k5 m<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
& p% [6 v/ K3 Z& c& _( @) v. R<br>
) u- }7 t' U' @8 M" ^: d<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>, c/ A% z1 Y+ l. o: ?" l! |1 Z
<br>
3 A4 y. j1 h" p7 r) T- Y. Y. s<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
: x% B5 e; r) L: B+ |/ I8 a1 u8 x<br>9 q) S+ ]! a+ E! k0 ?4 j
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
7 I% ^7 f, @" R$ U( l1 `. M<br>
, K. P! \ l3 [6 ]' x<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
& B1 t5 l6 u, x+ ^<script language="javascript" type="text/javascript">3 U. O2 X5 L1 G
<!--/ h- n8 _8 T; y
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering4 ]3 {. p4 e9 R0 v
//-->
# }4 a+ h9 }$ a</script> |
|
发表于 2008-1-21 20:48
|