|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">/ a0 v7 s+ a% `4 ?* }
<!--; c3 @' }0 T0 _+ j
// convert a single digit (0 - 16) into hex* P% c0 I& `5 N
function enHex(aDigit). t( L# H5 U6 k9 D) b
{
2 A Y: [1 e/ ~% u return("0123456789ABCDEF".substring(aDigit, aDigit+1)); Z9 U/ C1 l7 |) V/ q" _
}
/ f$ ~% x( }- a) F// convert a hex digit into decimal! E" K7 i/ v0 l9 g8 r
function deHex(aDigit)
/ x3 Q1 ] r( S5 i6 X- s{3 o5 L# f( F' @, m" B
return("0123456789ABCDEF".indexOf(aDigit))1 j7 K% k" a+ d+ A) @1 B
}
' }( [. c$ R2 t" |. X7 S$ z
$ B# e0 A: e2 ^" a ]% F* g// Convert a 24bit number to hex
' F4 |, T) G! {9 Jfunction toHex(n)
( `, h6 I4 r& q{
* j" q* @( L% ~: t9 i7 F' I return (enHex((0xf00000 & n) >> 20) +
5 [* u/ Z: T T! p' C enHex((0x0f0000 & n) >> 16) +9 D* B6 W1 @! Z% \- D4 I1 M' ^
enHex((0x00f000 & n) >> 12) +; \1 O7 m7 j" Y! j8 @' q) J
enHex((0x000f00 & n) >> 8) +. R f1 Y5 \& g4 s; f! \) Z% w
enHex((0x0000f0 & n) >> 4) +2 g0 h; @1 h% G( e2 g5 P% t0 A
enHex((0x00000f & n) >> 0)); _0 o- I% @' f& X6 h
}
2 q1 l9 S6 R1 [5 W" ~1 w// Convert a six character hex to decimal- t0 a) p7 ?. I, @. E( d: ~
function toDecimal(hexNum)5 ~4 B0 T A7 e
{
6 h" I& D& n+ }8 H6 w var tmp = ""+hexNum.toUpperCase()0 b1 m+ i: J( \, v6 k- |* n
while (tmp.length < 6) tmp = "0"+tmp, X b1 o6 Z, W( M- W& Z# ~% ^$ W ~
return ((deHex(tmp.substring(0,1)) << 20) +
2 K: C2 Z: e! K' L: @& s7 P5 L- ^ (deHex(tmp.substring(1,2)) << 16) + 2 v; B7 q( x$ s2 w2 H" |# s
(deHex(tmp.substring(2,3)) << 12) +5 F H5 m% l* G0 u% `
(deHex(tmp.substring(3,4)) << 8) +( v6 C# A' r# s( D7 f
(deHex(tmp.substring(4,5)) << 4) +
) ~7 ]+ d6 L/ _9 d% K* l4 k (deHex(tmp.substring(5,6)))): ^ p! Y( r* U% s2 U: l
}
* P2 T1 l7 k5 @& a3 i, x5 {///////////////////Shimmering Links/////////////////////2 ?. x+ i$ T& a8 S" G. A
//global variables
) z1 i3 ~' l6 b" Hvar hoverColour
$ }' @0 u: {( z ^* Mvar numLinks;- T" B& U2 e9 J8 k" n" c4 w7 o% Y
var rate;
6 d* a: Z1 b4 j2 n5 T0 b" u0 fvar numFadeLevels;
+ v$ b+ q/ Z. ?# |4 wvar bgR;
! Y$ k5 p U W, Rvar bgG;/ N4 L$ {( ~* u6 }5 X) w
var bgB;
+ W( S7 a" F2 T: a" F; Z7 Vvar currR;
3 [- Q7 E6 f! E. i; R+ avar currG;
& h$ Y9 N9 [# f6 C% e- T) Q/ dvar currB;( _0 z6 u7 d) Z; ?
var count;
P$ ~8 J$ P5 ~& v, _var fadeOut;
, @3 n2 z" Z( }var continuous;& t$ }# K* K5 f
var newColour;- @ L; D% [9 ]: N1 h: ^' x) @
var tID;
6 i/ F* s, Q0 ?8 Svar redInterval;: f5 w" l7 R. S& S
var greenInterval;$ q9 Z' Y% }2 c
var blueInterval;
# C4 B) m! D+ x0 j! T* `' X! mfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
# ]0 G1 \ S' D( l+ p' I H0 l{3 H, q0 c; ]9 j" I; U
hoverColour = mouseOverColour;
5 Y4 z: q( \+ D" Q. g: ]* ] numLinks = numberOfLinks;
0 G% Y9 _5 o$ x; A, l" A o0 j. z$ ` rate = 1;: K3 o" h q" s$ f8 n7 d
numFadeLevels = 30;
/ O. z* X4 N0 M) g function initArray(theArray, length, val)
) i& b8 a3 W. a% p1 O {
j5 S4 {+ \( P% o7 _" y j7 V& i# t1 z for(i=0;i<length;i++)
" i9 c; o: F' Y$ ~ G( Q {' c" T2 f/ I! s! J8 `! E
theArray = val;, ~6 L9 g% k7 ?1 t$ K! F* w3 e) w; J
}# e$ y; y$ P q* E, ^: f. m
}
0 }7 B& T, D" n bgR = '0000' + fadeOutColour.substring(1,3)' G4 r3 z7 h) s7 P1 f
bgG = '0000' + fadeOutColour.substring(3,5)
4 F" ^$ _. L b bgB = '0000' + fadeOutColour.substring(5,7)
1 s$ X( j9 ^0 Z% P' ?$ q" o( T currR = new Array(numLinks);
8 O Z6 [' Z7 K4 z k, Z( o currG = new Array(numLinks);
" E; Z+ {! i" W currB = new Array(numLinks);+ O" ?+ O7 U! P
count = new Array(numLinks);' r+ K- T, O# Z9 c y& S
fadeOut = new Array(numLinks);! D2 P5 H I4 @! E! _/ d1 P
continuous = new Array(numLinks);0 f) q7 M7 G3 k8 X2 V
newColour = new Array(numLinks);6 D4 t _' a- |; d0 _* C5 N8 N; q
tID = new Array(numLinks);
5 V% b! W! D& a8 [. N redInterval = toDecimal(bgR) / numFadeLevels;
! v* K. y( [! U; d$ b6 B/ K4 q) T greenInterval = toDecimal(bgG) / numFadeLevels;
( `# b# G2 ]$ t" E; ^, z4 ? blueInterval = toDecimal(bgB) / numFadeLevels;
f, t+ o. Q3 c: m5 p initArray(currR,numLinks,0);
$ m2 C4 S( v( r# G9 ~5 h initArray(currG,numLinks,0);9 P' F! n* I6 ^' H. D
initArray(currB,numLinks,0);5 h3 w) P1 n1 @# p( w7 L. {& G
initArray(count,numLinks,0);3 m) R; D6 n! B' x, Y$ m; S
initArray(fadeOut,numLinks,true);, B% W% Q# Y& s
initArray(continuous,numLinks,true);7 P P0 R) W: k2 ^( v* C) B; P& F
} . D& {- o3 P8 |# V* J, e3 E
function startFade(id)
1 G6 M) S: ?! \, M, ]8 G( _# S2 B$ f{8 c! g7 m# Q. \: n( y1 M
if(fadeOut[id] == true)
% h: k' s& q) ? { /*move colour towards background colour (increment)*/1 b' A$ y& u4 I0 R
currR[id] += redInterval;& w) i w, D. n' W+ I( R& q$ W2 }
currG[id] += greenInterval;
# [. }. K6 _0 T9 k' ` currB[id] += blueInterval;
5 j! D: @" _7 B; k7 Y newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);5 C* r% k( L k/ J: B1 V: i! }
if(++count[id] == numFadeLevels)) _' }( N$ f/ ^
{
e% g4 H9 O4 C2 i0 ^* ^/ B9 ? fadeOut[id] = false;% u0 ~( }. G8 ^* v
}8 ]6 R1 f' F" i2 ]& T; h+ V
}
$ `% I5 r. a. [ else
& [$ E1 V* x, J. ?/ h/ E0 i5 P {
: x/ {9 x+ I: q currR[id] -= redInterval;
8 C, R- i& W2 G7 S/ _0 v) E0 e! W: T1 K
currG[id] -= greenInterval;: b6 j# E# H- b
1 X# M, t B1 q: L currB[id] -= blueInterval;2 Y( X: O9 q `2 n x
5 r) Q* m {, G1 J* M' J2 o newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);; \1 L4 b5 a- k' n, W
/ b: d6 C2 H$ W* s- d8 V% C. k
if(--count[id] == 0)% l/ O3 K5 M' a1 Q+ e
7 O8 P9 y w5 \' w6 b8 |
{
3 h N- B# n3 N
+ r4 N* |% V6 ?+ m" i fadeOut[id] = true;
8 G. B3 o* {/ o# c: {: z
6 W: q! c' [$ } }7 n5 h/ {3 S% `. W/ X; x) p
( \! I* K# r2 M- V% N! |) l }
4 q* f7 B( k( U4 }! \$ J' Z8 q/ ]7 l" j8 k
if(continuous[id] == true)" U a: I. Q7 Q7 T* u* {
( G/ e0 E, u% T! o8 x+ ]1 G {! A& ^/ [6 j$ W4 X# W9 V9 W; w
" ?3 [" J1 u! {3 H5 n+ ~! m6 J4 c
document.getElementById(id).style.color = newColour[id];
& |( P2 u+ c6 k7 Z
5 ~/ F6 K: f" _1 U }
5 U! E9 O4 _- @% I
. z/ {' t; M$ Q) j- S8 \ else8 B" M1 I9 n" l0 _! W
) N9 i' N" G/ X" G5 H% W! v
{
F, e( n4 j. h7 b8 ?& \: I& g+ [, G4 J! v
document.getElementById(id).style.color = hoverColour;
* i1 s9 W$ F" W4 W2 O: o4 o. {7 p( j( u/ \5 q
}
. N% J- @$ W5 R2 g6 M& {1 t$ D5 \: c; X( I5 y: j* M/ r( c/ ~6 T
clearTimeout(tID[id]);* h1 \6 Y; A; |, U: W# v2 B
8 t4 S" k5 J& x' q* t/ J; r' N3 e
tID[id]=setTimeout('startFade(' + id + ')', rate);8 S' I' {4 R8 O' {% L
) ^ c. _9 H9 F1 Y1 L8 G, J
}0 f( \0 [ B4 q% H
8 u4 w( t2 O' i% o$ a
function continueFade(id)
: J& F6 ^6 d+ ?1 G" ~! J, W" C. D7 c; \) k& m' u
{* f$ R5 v* V2 w! K& W5 a
1 P# J% `; j+ x+ J4 m0 g7 Y: I
continuous[id] = true;
. p) k6 A! A0 X- \* d8 y C# t
; H' n4 v* G; v, M% |0 x4 e}# Q' p! C# S3 l" m3 Z* _) p6 z6 X
* |! M& V! L4 A1 Z1 T5 K
function stopFade(id)
! i: G# h2 |' I, n+ }3 T& K: c6 q5 O- z* N9 m. y& S& o. e
{; h' A6 D) f$ E5 I+ d( F9 [8 {
* m7 w& v y0 g* H1 [7 Z+ p1 j& P continuous[id] = false;
5 k+ L! l# @0 v) k
7 r0 g) v/ x5 Z2 _( @( S}
% S: a% \+ S6 F6 M+ e- t7 j# z7 c) @5 j) v
function StartTimers()4 \( |4 \" [( q0 D! v3 z
+ Y( M" F! d9 p
{ //set up an initial set of timers to start the shimmering effect4 V- b) q1 E% y
* {0 h* w: R& @) E
for(id=0; id<numLinks; id++). p2 K* }- W( [) g$ x
/ T9 L1 H- g" i. A. |3 b
{
$ }2 l/ w6 S) V1 M! `- X' J5 R
$ m9 a) T# f+ q' Y+ H2 } t=setTimeout('startFade(' + id + ')', id*100);0 ~8 w4 M% k- `
% I" D4 C1 L2 P. ]/ \$ y
}
3 n* f2 g" n9 j; }
$ w Q0 ~8 X# o9 \$ P}
1 i' S- h6 w' D0 T# H) e1 _: r- B- {
( T$ ^% |: r9 u0 t, c' {6 Y; A//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
3 A' M. ], n$ ?) B# R6 H" I( b: q3 T" G3 [) V+ F* Y" {
initLinks('#FF0000', 6, '#FFCC77');) v5 B6 u% q. \* C4 I, W- S/ _7 n
! \* F2 b2 W" [7 M5 F
//-->
M% }& e5 |5 Q) o
0 X! R* r4 Y# ]</script>; B/ D8 |" @! g4 ~" Z
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
' q0 |8 H3 b F/ h# c! w</a>
5 I% G+ \, c; v<br>
1 a! k7 n% T: d. {7 T<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>
2 r1 @$ p/ |1 [. Y% r% h<br>% j/ {7 z5 ?+ |9 m" `
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>+ p1 ^" [. k6 t8 m+ _, V
<br>
- b% h2 A6 z5 k<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>7 ~& F# \) a% F, P" U; J
<br>
/ ]% X% v! V6 {$ g+ R! k<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" w- g% M7 v) u<br>4 o( T- U* U0 ^
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
3 r8 d p" I" r7 }5 s: b$ \<script language="javascript" type="text/javascript">8 M3 _9 I& M& U% L- ]
<!--
3 t2 ]9 _! t- |, d! {( }& msetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
6 | {4 t/ C* m) w//-->
' f T6 F {0 m/ _5 L3 y5 ]1 F* C</script> |
|
发表于 2008-1-21 20:48
|