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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript"> }; ]% N! }4 Y- I
<!--
% D% D2 M, F4 H) c// convert a single digit (0 - 16) into hex
% P* q/ v: O: `( q. @* ffunction enHex(aDigit)7 x. D; P3 ]& v. L
{4 E( ]' S1 R; C4 s- E( ]! {
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
" B, t* y- l# q# U9 T/ e}. V0 A! p( B8 W! ?
// convert a hex digit into decimal
6 _9 ^' d, W' R- l7 l% m: V: O# C# qfunction deHex(aDigit)
3 _" W: I; \9 Z2 @{
( Z$ ?6 |: H4 a8 o return("0123456789ABCDEF".indexOf(aDigit))* C$ O. G4 O( S' }) K' d# e5 K$ e
}- h% i) Z; Y0 i. @4 J
! {9 l1 M/ p: ]( ~+ p
// Convert a 24bit number to hex- ~& U: D- w( e
function toHex(n), m& h2 G* W! y2 M/ J, U
{
" M5 [/ r! q* r S4 z9 c6 [ return (enHex((0xf00000 & n) >> 20) +
+ |6 T# j' {* l. O enHex((0x0f0000 & n) >> 16) +: G& [2 j7 o( ^) T' i
enHex((0x00f000 & n) >> 12) +
. v; F4 \& u3 X; J2 [ enHex((0x000f00 & n) >> 8) +( m; R/ T8 a& H
enHex((0x0000f0 & n) >> 4) +
5 N8 Q9 N V7 U0 x enHex((0x00000f & n) >> 0))7 ]1 k" E- _/ E8 ~" V* K" a l9 Z5 B
}4 U; B' @9 M& w, j; F$ N3 O
// Convert a six character hex to decimal
3 w1 ?* ]2 S, B/ ~6 a) `4 gfunction toDecimal(hexNum)
t" C ?& I" A/ C3 I$ ]" j{
" ]3 u- [0 S. ]+ R% ]0 N$ x$ L var tmp = ""+hexNum.toUpperCase()
, H! c0 N( D/ s" p5 Z while (tmp.length < 6) tmp = "0"+tmp3 |& R9 P4 {: ]9 i* @
return ((deHex(tmp.substring(0,1)) << 20) +, l! e0 ?8 O; x5 Q$ l1 x" N$ Q! A' k
(deHex(tmp.substring(1,2)) << 16) + 9 U% V& y7 Z; c! e8 B% O2 c
(deHex(tmp.substring(2,3)) << 12) ++ m& v( W- h2 y# S$ C
(deHex(tmp.substring(3,4)) << 8) +
! R8 [0 Z/ F9 ~/ S* F) K (deHex(tmp.substring(4,5)) << 4) +* ?1 W: F Y3 e( K! @
(deHex(tmp.substring(5,6))))
- ~; b0 F% J5 r: Y}
' V+ d5 f3 l! K" C: p9 e0 D" i///////////////////Shimmering Links/////////////////////$ a$ R* I6 U6 s% E7 k& Z4 h" f) \
//global variables
( B6 \5 m9 S! b, v! x& J4 E* J& Tvar hoverColour
' n; Q: Q+ a) N) _8 Y3 |: dvar numLinks;
O5 ~7 M* q" F' [% l$ Hvar rate;( N; I& m, J# K) u
var numFadeLevels;1 c, H" t0 a o/ Y; i& F; s5 p
var bgR;6 @ Y$ K; [" P( _+ `# v$ L, q
var bgG;
1 r* o% o; Q( o; g; [var bgB;: y5 z. b7 N/ G0 c% @" H# u' T9 J
var currR;
. j% b9 k! A* o4 z9 P( Yvar currG;7 M& r+ A1 b6 \8 P2 _
var currB;
7 ~1 z' v3 K* V7 W$ Uvar count;
" J0 W) A" A1 v; e b' p# vvar fadeOut;3 O% y/ T% @# S5 @; B+ v L
var continuous;
% j% n$ s: I+ Mvar newColour;
* S# o [( V) h o& ^' `8 }+ tvar tID;
% q1 a' r9 e0 }" R2 Y2 Zvar redInterval;
0 x( [6 U! o$ g" B& s3 A7 F) Evar greenInterval;0 G3 p3 P9 }3 p
var blueInterval;% m' V3 c. b/ H# Z. c
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour): J' r: u9 _: h. C7 P" [1 b
{+ p7 J+ Z% q# i& k! K
hoverColour = mouseOverColour;5 l5 ?: B v. ~4 f
numLinks = numberOfLinks;- I. F- w. e+ E7 w
rate = 1;
: g" `8 S4 w$ i/ z( B numFadeLevels = 30;
j; ?6 f4 R i2 q8 P function initArray(theArray, length, val)" W# x( S$ n7 v. C
{
' C, Q5 M6 ?5 b: Y: Y) ] for(i=0;i<length;i++)
4 |$ i. P) U* G" r1 z {
, M. D- {. X- K# G theArray = val;
9 K) b* o; e* F7 n2 `/ z- H }4 H! I" h( e8 m" w3 H
}
8 D! H! j0 u3 L7 } bgR = '0000' + fadeOutColour.substring(1,3)
R; w- e0 j8 c9 k3 d3 O0 J bgG = '0000' + fadeOutColour.substring(3,5)
! [$ b1 _- j, S0 J+ j+ U3 C m bgB = '0000' + fadeOutColour.substring(5,7)
0 ?) [/ c: }0 Y; w currR = new Array(numLinks);
$ I3 M) j! {% G+ y* I& [ currG = new Array(numLinks);# n3 g" O5 v( z: K" x% {* L
currB = new Array(numLinks);
' c z6 [/ b) ^' |) b# ^- W count = new Array(numLinks);. c* _. l# e0 l; ]6 o/ V
fadeOut = new Array(numLinks);& o9 X1 {: |4 U* \
continuous = new Array(numLinks);7 d1 @+ c7 O6 e
newColour = new Array(numLinks);' C! ~- l: W, o M
tID = new Array(numLinks);
% l) N+ ~0 |; K8 F ]1 Q redInterval = toDecimal(bgR) / numFadeLevels;6 H7 F5 l1 o% E8 G( x5 W
greenInterval = toDecimal(bgG) / numFadeLevels;
+ g3 V9 h3 p0 O blueInterval = toDecimal(bgB) / numFadeLevels;
- f6 C. B& C/ u initArray(currR,numLinks,0);
6 K" p' ~) {4 { initArray(currG,numLinks,0);
# S _2 L0 @( ~- c5 S, E initArray(currB,numLinks,0);
' [! s" e4 A& _ initArray(count,numLinks,0);! ]% O, f! Z! g+ [
initArray(fadeOut,numLinks,true);
4 B Q1 M5 G' R4 h9 f; s initArray(continuous,numLinks,true);
2 S% \' q4 z: y; V}
: S# Y( F5 Y6 K' k& F3 F* ]function startFade(id)6 r$ C: T' d/ p$ G
{& K2 a7 C- j' v
if(fadeOut[id] == true)3 @! z( Q' v" E
{ /*move colour towards background colour (increment)*/
0 R' B+ M$ i( _5 }* a2 \7 d4 T1 ~ currR[id] += redInterval;" Q2 Q% R1 c8 e9 x/ [! j
currG[id] += greenInterval;
- b; G5 X7 [/ [: K( J4 h* v; k currB[id] += blueInterval;9 x R% f. T; b% H; k1 B
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
" y6 u9 h2 F4 A0 e& s; g0 T* y0 f if(++count[id] == numFadeLevels)
9 z+ N6 p+ g4 X6 r& G {
8 W! Z# g. l4 \/ X& t) X8 o fadeOut[id] = false;, X6 j! V. f: k" v" z/ D) N# p8 Y
}3 b4 M' r! o% Y: P
}
% Y6 O0 v. n- x# { else H8 y& M+ Q6 D4 d1 }* F6 g: o
{0 n. k% {' Z$ g7 o, y
currR[id] -= redInterval;
' J& ^; N$ H" ?% z; B, C E
/ q, w3 O$ s9 a5 ?$ o V. |6 M$ S currG[id] -= greenInterval;% V4 T4 M- @$ F- Z
( A$ `8 Q8 V1 ?3 u( A% j currB[id] -= blueInterval;
* l' L$ E4 G T5 {
2 ?1 W, j/ f, u7 I- ?2 K- z newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);$ E" K5 n8 I2 ]+ h& x3 {$ C
/ w9 W8 T- h: I- \- C9 x if(--count[id] == 0)2 j6 B4 E( n0 `' l
2 n% A/ I# o0 p) ^, ] {
+ j7 [- _5 c* H6 f7 K* S1 Y3 o3 q3 u3 o6 Z+ x+ J0 ^; E% C
fadeOut[id] = true;
' d9 N7 ~- F7 L+ X7 @5 t
. A$ K, C. e( @4 [( R: S) W }
8 u; A1 ~7 y6 n/ M1 M
5 I. @5 t* c4 H7 {; H6 A }
9 y$ @- C& _- U, `- G h/ c y7 s8 L' \ ~* H. q
if(continuous[id] == true)
7 @ R+ j9 J. J- A( x3 }2 U5 L" E$ x% {0 \" W! `" T# `
{
0 y9 ^, _; f- w6 T" {. Y. U* b/ a5 j* q9 C
document.getElementById(id).style.color = newColour[id];
/ z4 p2 D8 B7 \/ f0 Y( Z( X9 m4 ]& L7 x; s- o6 V5 j z% d# w# K$ d- n
}5 X* E5 w% h% h: Y8 u. d0 V
4 w7 C G2 o/ g% I( A else0 J U' i" i m7 b1 `# t& Q" C
' H" P- Z. L" g
{" P1 v% P% k0 b! U) u2 B
! Y! C* T- }# {+ g/ g document.getElementById(id).style.color = hoverColour;
2 U$ C, o+ B5 ~* ?1 t' C. `& z/ O& i- K# F
}8 l; X" i7 x/ a
$ t% A" t8 s$ C7 T
clearTimeout(tID[id]); ?8 Q2 O4 o- ^# h$ M. K6 |( E
3 R: B" u% c4 j' _2 n! K z& \ tID[id]=setTimeout('startFade(' + id + ')', rate);
( f7 w8 y, { w# g# g3 x
3 Q6 D* Z, l" p0 K}% {: N' L. T7 U$ q8 S0 [/ i! C
% y' O) B9 h! D
function continueFade(id)$ s% b- U$ X+ v6 u# X
}$ P9 P; S- t$ Q2 k0 Y{
: S1 Y% ~3 N3 p! z6 X
$ L* n) m/ v" ?9 z A continuous[id] = true;+ ~4 g& H- N$ Y7 M3 N
* A' l7 ]4 d$ S) {- ~
}
0 d5 L# C; @' r+ \* }5 |, @! H& z
function stopFade(id)( o+ U' s- L% L' R% f" `' P3 u' j1 X
; ?' y6 n" q5 t/ b+ F7 m+ }$ H
{
' ]* p* m) d9 I: V; n1 U- w3 [5 A) x' h* f2 L
continuous[id] = false;0 Y5 Q- w% t: K
! R" J+ Q5 J( k* D) _" ?
}1 ^1 r9 L! `' ^( O, n/ N
' c$ c: v9 C+ B7 u( [1 D) Ofunction StartTimers()# E- Z9 E2 m# C( b# g# J# W
# {% Z( q8 K6 r1 V
{ //set up an initial set of timers to start the shimmering effect! o$ J. @% L9 Z& P: k% T
2 `9 x/ W" O- G1 k
for(id=0; id<numLinks; id++)" b, q' }0 u9 W/ z) J1 m6 }
7 A( F- W Q: K+ ^' Q
{
2 J* a7 [$ V5 T3 N# k) W7 K( k( c8 `8 {4 O+ n
t=setTimeout('startFade(' + id + ')', id*100);* v+ W8 a3 V$ `8 Q" _
+ e4 t/ l9 ?$ ^# B }5 |! T( y. ~4 a! t1 }" I
' O9 C, N1 u% A$ F" _8 J; A}
* u9 |, V6 I# }0 U$ f+ a5 {* M2 @0 g9 k. `% t4 [, w
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')& B3 h7 H5 \: c6 x3 c1 }7 c+ y
9 J6 G9 p9 B x6 O# [! G, B; {
initLinks('#FF0000', 6, '#FFCC77');( _& m1 {4 [( g1 c
* l0 D2 k+ Y6 M6 w- f0 a//-->
4 M* u- A! u1 \' }# F* Y! Y7 r1 Y3 \, B
</script>
2 P' h% I( K% d: ?( L<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
; _, W. Y7 V; t" k- \ K2 ]$ L</a>2 |& r: C4 B" @1 }6 ?
<br>+ P0 \, x* E) F/ X1 K( z
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>' {2 M# q4 B# e
<br>
) ]3 j. e1 B8 S6 J<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
' ^0 F2 b% j6 O9 h( u9 N6 b" b: ?& e<br> ; P W8 y9 O6 R+ S% E- i, B
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
- Q% a4 B' [. h, ^/ t5 g<br>% l) v% P. G6 L) y
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
/ q; \4 q7 o5 u& j% A' @<br>) v6 s+ Q+ P$ B! o( q3 O
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a># W6 s R; _+ D& X2 ^/ u6 X# }( \
<script language="javascript" type="text/javascript">
& x$ Y/ S* V8 W! U7 a1 h/ n<!--
+ s- i& |! e- u! K5 ~- b7 lsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering; a6 ^. Y" M( e0 @; @) K" N( x
//-->9 J* w! ~# t% E" u
</script> |
|