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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 t! K4 d( M& c1 n<!--
* I' A! i/ Q; K// convert a single digit (0 - 16) into hex0 u" I6 ~0 i4 B% q6 k2 ?
function enHex(aDigit). r! G# \3 Q. j- R3 y/ u! T
{& y; w: R4 O$ Q6 \5 B, b! u3 D
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
7 O3 q7 P/ z1 _) T}% B, b+ v4 q" r$ p Y+ e; _4 u
// convert a hex digit into decimal
) b7 V% W6 p J# f8 _- yfunction deHex(aDigit) E1 Y$ ~- H/ O2 W' h
{) f, W' y! p: J. p% D1 g
return("0123456789ABCDEF".indexOf(aDigit))6 {$ m o$ f X
}
) ~; L( a$ L: T& D }5 b( M
' `) K- k# l) a3 G6 i2 K// Convert a 24bit number to hex
4 E& y* v8 `7 R+ h' `( H; bfunction toHex(n); s& ?" O4 H' S) A. J7 b& m9 v$ o
{
$ J; a$ p- L6 x2 y' w return (enHex((0xf00000 & n) >> 20) +) G i$ R4 n% V' _
enHex((0x0f0000 & n) >> 16) +
5 Q! y6 W9 r. L$ x" Q3 N. o: s enHex((0x00f000 & n) >> 12) +7 s7 @+ o0 c8 r; R2 E3 U
enHex((0x000f00 & n) >> 8) +4 U9 w- z5 G1 H2 `) T9 }$ u
enHex((0x0000f0 & n) >> 4) +
& H# \. b6 }' B( K enHex((0x00000f & n) >> 0))' W) a) j. x+ q
}, \0 X* c7 F& p8 z# m8 }3 Z6 [
// Convert a six character hex to decimal1 X$ j7 Y4 [. d# L B
function toDecimal(hexNum)6 |1 @% p& {9 e$ b
{2 E& l3 ~: t2 ^( Y5 ~6 Z
var tmp = ""+hexNum.toUpperCase()
9 w( k) ^8 V$ c while (tmp.length < 6) tmp = "0"+tmp
1 `. R5 f+ y, `7 i. R( `- o/ l5 I6 i, D return ((deHex(tmp.substring(0,1)) << 20) +
I9 k3 L* l' J( ~0 p- `& K (deHex(tmp.substring(1,2)) << 16) +
% R- S: t- W& M% u (deHex(tmp.substring(2,3)) << 12) +1 u7 {. G" E2 V2 m- ~4 E
(deHex(tmp.substring(3,4)) << 8) +
" `& T! {: P! I+ J (deHex(tmp.substring(4,5)) << 4) +- D% B, k* l/ S7 Y
(deHex(tmp.substring(5,6))))
$ W$ D& ?3 t: J8 K2 ?3 v/ J1 D3 c/ a}/ V9 e0 `( I* Z1 G+ z: P% ]9 g1 {
///////////////////Shimmering Links/////////////////////& F* j) J/ b. e* J$ R. `: I; L
//global variables
- B) l j! ]) M! tvar hoverColour
' ]" ]: x* n7 Q- B1 tvar numLinks;8 ]. X# u9 _8 w3 `$ W) Y
var rate;! h% k% y/ Y' a
var numFadeLevels;7 n$ t2 E" S( c7 z9 }
var bgR;; {% h8 r% Z a. w" I& g4 t' \
var bgG;: I/ I" N" p2 \6 D, L- t
var bgB;: u9 S" ~" D: _
var currR;
v2 C* N# g" Q1 ~: ~- R3 d" |var currG;
4 J4 a1 Q* Y/ g) ?, Z6 Kvar currB;! {- s5 i( D+ f* J: x' j* T
var count;
r/ w4 J# m' Y. j/ _var fadeOut;
' O1 _1 B! t! J0 y5 ^var continuous;+ q' \1 p& V5 a' j$ D( I1 l
var newColour;3 L# r0 x2 L3 X& @5 \
var tID;
/ u- a* Q7 }! s4 m, U m+ jvar redInterval;' \, Z% B! O' g" u; e0 Y
var greenInterval;
6 V) P p- j* f) G' Lvar blueInterval;
' v; G& c6 J5 F1 _) d9 `7 gfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
+ g$ Q/ c" r8 ~: Y# t{7 ?1 n- M4 `3 ~! l: z
hoverColour = mouseOverColour;
4 K4 K# R5 ]' y( \% ` _ numLinks = numberOfLinks;
6 Z8 E0 ?( L& I- u- o rate = 1;+ G4 X* e7 Y1 h( H3 ?+ y, g
numFadeLevels = 30;" ]: w4 G M5 ~1 n& |
function initArray(theArray, length, val)/ K5 C8 _& }* e
{' D* q8 x/ o' l, ~* n, C; c
for(i=0;i<length;i++)* R* I! V+ q$ ?$ k4 J: ^
{: X3 H& c8 r2 Y+ p' Q" a" g
theArray = val;
6 h& X' x: L$ g% _/ S `. y }
; m# W. f0 ]+ ~" Y }7 g& \# \0 u/ D: d4 g1 c w6 j
bgR = '0000' + fadeOutColour.substring(1,3)
# y1 {7 g7 e1 t. x4 V9 a/ N bgG = '0000' + fadeOutColour.substring(3,5), N( t+ V% z. X. } N. V1 j9 W
bgB = '0000' + fadeOutColour.substring(5,7)9 Y8 \9 _8 v9 D
currR = new Array(numLinks);& {, k. c" n( @' c& M0 f' V
currG = new Array(numLinks);
4 `/ d& m" Z* S0 { currB = new Array(numLinks);* j! e; k5 E3 ^% x, F9 P
count = new Array(numLinks);
; E4 \0 {2 r+ ~: ?; r7 d fadeOut = new Array(numLinks);
! Y" Q+ d, W# m; O- H continuous = new Array(numLinks);- e0 i# V. O8 n$ H: ]7 S3 c3 a8 m
newColour = new Array(numLinks);' q" U# W" v7 ~! d6 q
tID = new Array(numLinks);
3 X* x/ D4 G1 k6 W) Z: V redInterval = toDecimal(bgR) / numFadeLevels;7 e) {/ | g0 w* b- X
greenInterval = toDecimal(bgG) / numFadeLevels;
- z' A6 `! Z, z1 E/ b4 B blueInterval = toDecimal(bgB) / numFadeLevels;
; P# @' K W! a! H1 p) H initArray(currR,numLinks,0);
8 B2 f8 C! Y6 G* L# I4 m initArray(currG,numLinks,0);4 o" {6 m/ G0 H8 p$ Q# n
initArray(currB,numLinks,0);
! S# j. G! W: R: } `" M K7 t V; Y initArray(count,numLinks,0);9 j3 B& w& r, D0 Y
initArray(fadeOut,numLinks,true);
* c# d9 }& e- L initArray(continuous,numLinks,true);
) ]% O; l4 h; h1 r& o: O) p} " H) h" g3 h* R3 y" s
function startFade(id)
7 V" J2 ^8 [- a9 L% C{
4 s. @1 [4 p3 Q+ C, F3 y* d, v if(fadeOut[id] == true)4 t# g# i1 [) e
{ /*move colour towards background colour (increment)*/
6 J2 m% m5 }: N7 y/ R currR[id] += redInterval;, h/ j6 j6 O9 Z7 N" E$ v
currG[id] += greenInterval;& S6 p5 B" I: G& `8 [/ ]
currB[id] += blueInterval;
' i! m( \$ @3 g, @3 R) O' s newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);* c, A; g o% L2 B1 u
if(++count[id] == numFadeLevels)0 I6 u2 s7 z3 H% G6 w6 m
{
# z2 L- v& A. R& d fadeOut[id] = false;
+ Z, z/ u" _ F8 V( M* ? }* V9 {; k6 g. T
}
- f, ?3 d; |% R) H1 ]! D: u5 j else ]* P! r: V) M
{2 Y) y$ D' S1 z, ?- M0 b7 j
currR[id] -= redInterval;
; L, S0 n7 W5 e' M2 _
" O5 s! E- @. p3 E6 d P currG[id] -= greenInterval;% j4 V& x: D' }4 O5 j/ @4 {+ O4 J
[9 K6 K7 T+ _! g8 r8 x$ S) q currB[id] -= blueInterval;1 u2 W: ] j; q+ ]$ M( }% S ?6 E
: L! e3 ^/ U( r0 E; p: k
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);7 Q6 W- t. S: u2 P. L
4 Y+ [1 K' J6 v8 T* M" e% j3 W
if(--count[id] == 0)- C8 D! ^/ i0 x% H* L: ?- @$ D: m
* l- v9 s6 V( h$ c5 Z" v$ ?2 y {
2 a2 Q7 j. {" G& `% l. l G
9 W7 T4 N- g+ a& a2 j5 ~3 n fadeOut[id] = true;
9 w5 a' e2 E' p2 ^3 m
' G) C/ |5 I) U }# e7 W) d1 L. q3 g( j9 ?
: O% v7 Z. R# u; S7 ]' l' ~0 F0 g }1 F; q' X8 X! u6 Y- u8 K+ l& [5 T
5 y: c5 l1 b& ]8 } if(continuous[id] == true)/ G4 N2 c! Z! z
% p6 `+ d( H; ` {
, p1 T6 I- L' }0 ]$ _7 t
0 f6 n$ r+ T9 [/ x( c4 m document.getElementById(id).style.color = newColour[id]; 8 \2 B6 l( u- b0 F' \1 [) [
" o" s/ j7 z5 K% C" P1 S1 p }( v$ ~1 [# p; U; w1 Y$ [
& c. g6 O' [# B1 |8 Y
else" X) n1 Y) f; \3 g
0 |: d# x1 H# [* B
{
( M! e2 V9 S3 x" U2 e0 ~( C6 \1 }
document.getElementById(id).style.color = hoverColour;! N) s, w4 z f, M
( s% C8 n6 |6 `, N% Z) r/ g. ^# r }3 U6 a7 t- ]4 K* H/ [ s1 k
* g# }! h0 G# p; U% }
clearTimeout(tID[id]);' `8 p7 O3 B( V
! }$ G8 s* H) z! J% r( {+ D
tID[id]=setTimeout('startFade(' + id + ')', rate);
' T2 g. |9 K9 b8 d/ E$ a- d3 @: t* S8 O- X6 d
}
4 W Y- ]7 ~" \% u# B' N2 n& W: Y$ y) X- M! N
function continueFade(id)( E- S4 P# i. f0 g- P& D! L7 i6 b
4 Z' U6 Z' j. u" X- H{
) X! F8 {: O( P1 E _9 L0 [% T& `7 D5 y# g8 r. t* X
continuous[id] = true;
! h- H# ^# I7 t* E; z& Q
/ P ?2 ~5 Q" E7 a2 g; j}: p; x. W/ X* f2 @& K' n
9 b5 B' g- z( `2 @+ o
function stopFade(id)/ P0 p% a1 W* v, V% {( x
! r' c% c2 {3 A( R# P
{: ^/ s3 P6 w1 U, u( a1 N8 L
; ~7 i. I. L; y9 k$ E continuous[id] = false;
5 Z3 P# I- \7 d+ l
! ?4 j; p- A: m- _% Y5 N}
d' |% Y' F3 t9 J1 S1 s9 ?% T
. l' f- ?' |1 q0 A$ `function StartTimers()) l/ I+ J, ]6 T. X. j
$ y4 `2 C% W& j, i6 O: s, S{ //set up an initial set of timers to start the shimmering effect, |) j* ^6 O* x
7 e# s2 A, `; P9 W& r' N for(id=0; id<numLinks; id++). @$ B4 @& D/ W' D5 T
! x2 S0 G0 M. _ {
% }, m6 B: w+ O8 U: w
; f2 V3 v8 j+ |" d7 X1 ~ t=setTimeout('startFade(' + id + ')', id*100);
3 O+ N, l$ k6 f
/ T$ n) u! U @0 c4 _- [9 H: y3 O }
. x% J+ |: G% b+ B: J. E3 X& \" `% T
}4 `8 u& T6 j1 w( b/ v. Q) f* m
3 p9 q& t' f6 m2 {- `1 `+ d
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')) i; W7 W: {4 \" F
9 v4 R( Y) T( [& t s" O
initLinks('#FF0000', 6, '#FFCC77');
6 M; b2 E8 W4 j8 @ r2 A
+ ]* o+ e ^/ ~/ v//-->2 R ]& y: x0 a6 }: r- x
/ z. ]# W8 F, h: |" `
</script>) q. R/ b: W! K0 I+ Z, x9 _
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元) K, S' Z8 c- e& J
</a>
3 `1 s5 D. H" i/ m- H! p<br>5 |0 B/ J0 F8 V/ }
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>: i, V: B$ }2 D+ w8 O
<br>* @/ v7 E7 e8 a3 |# e2 l6 T; r1 D
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>% `! v$ B, J5 F& F* b4 M/ ]3 s
<br> 0 @# `- F' ]& U
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
# L5 M3 f- m6 r& Z5 c# {<br>. R! J4 D4 P6 ^7 ^6 Q
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
( K; s4 c0 w) w+ t2 l+ g; _<br>
1 j5 c T" `1 t0 Q) P: N<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
2 f8 u3 w$ K* v* V9 u<script language="javascript" type="text/javascript">$ o& z, U3 B7 n8 G6 E% _
<!--8 A3 m' f! E1 Y# o7 Y/ w% |. n
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering ^* q; | u: i3 x9 C E
//-->
% r, U1 \4 [* S& r" D</script> |
|