|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
1 F9 i* x( I0 r/ b0 r0 @<!--
2 }1 D9 S2 q/ l8 Y// convert a single digit (0 - 16) into hex# e. _4 C5 o) X4 R
function enHex(aDigit)
: O1 T" o7 ~/ Y3 D{/ z7 h/ q9 L2 R6 @2 I
return("0123456789ABCDEF".substring(aDigit, aDigit+1))+ q8 m9 F" x& m h5 x( M
}* v2 c( K% G2 K5 x( \$ t
// convert a hex digit into decimal
7 E% [. r7 Z0 p' Rfunction deHex(aDigit)
# v, p+ J( o" U! _6 R" v{
9 z) E# t2 L% X return("0123456789ABCDEF".indexOf(aDigit))* U/ ^' V! [4 s9 _+ e% m. M
}
( E B* J" O* C6 B& f' M5 i) v/ T" [
// Convert a 24bit number to hex
0 {( M/ D+ z5 f% A* U: Hfunction toHex(n)
5 _8 E0 H( P* O; r' }{' ~3 e0 w6 n; M9 d& M
return (enHex((0xf00000 & n) >> 20) +" @2 y5 g: e0 B1 j- E7 B/ s
enHex((0x0f0000 & n) >> 16) +
4 T3 C' X( ~; O: I$ A2 j enHex((0x00f000 & n) >> 12) +
0 X' w7 v0 ]' O8 [+ G enHex((0x000f00 & n) >> 8) +6 l, u1 I' k. b$ g% m& U
enHex((0x0000f0 & n) >> 4) +2 o8 m- m5 E2 X d
enHex((0x00000f & n) >> 0))
; j6 v u. I' f/ P' f}
+ A% w, _' w( @/ X: _// Convert a six character hex to decimal( z: M7 a% X3 v4 |
function toDecimal(hexNum)) O* {$ O. J! K' ]4 y# a, j/ ]8 @4 N
{0 h' T# s6 t7 a, ^. E
var tmp = ""+hexNum.toUpperCase()/ Y! W& q0 x* ?% m
while (tmp.length < 6) tmp = "0"+tmp
7 L! b5 {8 ]$ u return ((deHex(tmp.substring(0,1)) << 20) +9 ?1 G$ B: V2 M1 ]
(deHex(tmp.substring(1,2)) << 16) + : t/ d$ ` N: [% i
(deHex(tmp.substring(2,3)) << 12) +2 h/ `5 a. s/ N+ S4 [4 h/ Q6 @- W& [
(deHex(tmp.substring(3,4)) << 8) +
7 D( p( l$ B/ |& g: D (deHex(tmp.substring(4,5)) << 4) +$ U% p) j2 W$ `( n2 d: }
(deHex(tmp.substring(5,6))))- B1 V# Q# ]4 I4 s
}
2 Z8 }$ F& [' W: M" u. `6 e. A///////////////////Shimmering Links/////////////////////
5 y6 c& g- h: d/ j( G//global variables, x4 J6 H( P! h5 }+ |) j0 B" r3 s
var hoverColour6 l7 ?, L; o: e2 n
var numLinks;
4 N+ X: f4 m9 ^/ a! l& dvar rate;
; L6 o6 P* o8 s# M+ A# Fvar numFadeLevels;4 R. g5 K+ }& I2 v; k/ o3 G5 E6 D
var bgR;
3 t0 J8 C' h9 ~var bgG;- ]3 k7 H# ^7 N% j: g$ E
var bgB;
# J9 D6 q: _+ h7 L% d+ z' i9 m jvar currR;; h( ? j1 c5 ^5 t" N& f) ?* v1 g
var currG;
0 I3 G- z! Q7 O$ G9 | _! ^6 o. o Jvar currB;
( i) O/ z3 @- ?6 ]2 hvar count;8 S0 K9 n9 d, ?: X W! A! Y
var fadeOut;
. e9 e2 y3 B. J/ p: N% Qvar continuous;
& k( ?+ ]2 H( ~var newColour;9 Y8 y; o5 Y/ i9 x! a
var tID;0 p3 U' k- |) \( @+ O8 m3 \
var redInterval;% j( i- A( A% |* ^6 d: _* M
var greenInterval;3 z* X' d7 b9 |% k
var blueInterval;
* \" |) ^4 u5 v: d9 Vfunction initLinks(mouseOverColour, numberOfLinks, fadeOutColour)" g: \: |0 y5 e3 B! A
{
/ }: o5 U# ]1 R8 Z hoverColour = mouseOverColour;
' e: M; A K% T numLinks = numberOfLinks;
8 S7 ~, h: D- d; N+ F6 j8 h8 f rate = 1;
. i- X/ ?/ P8 q1 B numFadeLevels = 30;% T& H/ Y6 b k0 m$ _
function initArray(theArray, length, val)3 Q* V B; W& g( q- t2 l
{
4 d9 \$ f- T* D, h1 y for(i=0;i<length;i++)
: A \( @0 E- L+ d$ c3 e5 d2 L! z5 `) X {
" E. O. c$ Z' d1 h9 l6 |3 Z& D) | theArray = val;& Z \# C4 R1 C. x
}% m4 [9 Y7 q5 u# z) y3 F) V5 l: ~
}0 K- o% I. v: E; a
bgR = '0000' + fadeOutColour.substring(1,3)
' |5 c4 `) B( b, ]+ B% n0 g0 c bgG = '0000' + fadeOutColour.substring(3,5)
% N4 W8 u5 U- `8 B bgB = '0000' + fadeOutColour.substring(5,7)7 [ @% [6 n, X
currR = new Array(numLinks);# ~. g# H% _5 c' R
currG = new Array(numLinks);
l: L2 \) e1 ] L4 T3 Q; M0 v currB = new Array(numLinks);
& Z1 _8 A, m8 P) e$ m count = new Array(numLinks);5 D( T( W! X5 k1 J2 ]4 n
fadeOut = new Array(numLinks);' ^: F( r; T {4 J4 o5 s
continuous = new Array(numLinks);
0 @! E2 K0 |" t, S. e! w) [) C$ a newColour = new Array(numLinks);
' d, h, |$ q1 s' P; b ?( N6 H tID = new Array(numLinks);
8 M) r; N" X/ f9 Z Z, V! G redInterval = toDecimal(bgR) / numFadeLevels;
6 W; v8 Y }( U) U$ J! m) ` greenInterval = toDecimal(bgG) / numFadeLevels;' D# k5 K* }9 k: s% S+ @
blueInterval = toDecimal(bgB) / numFadeLevels;
$ Z- Z% _" g& d6 p: u G V" x2 m initArray(currR,numLinks,0);
" i2 J) Y( t6 ^/ F0 M0 P1 s initArray(currG,numLinks,0);
) P0 J3 M! C& D0 k initArray(currB,numLinks,0);0 }2 e& d" C2 y& q: f i7 a
initArray(count,numLinks,0);
- k [8 O8 g9 f initArray(fadeOut,numLinks,true);
1 a. ?2 h$ \1 Q8 h! [# F* f E initArray(continuous,numLinks,true);
9 K0 @! \# K0 M b& f}
8 B1 J: N. b- g) q8 r9 kfunction startFade(id)
; U* |- @! m# Z$ |/ ]; D: p' S{1 O; o& C% e$ ^
if(fadeOut[id] == true)1 {, d6 w( s l
{ /*move colour towards background colour (increment)*/6 u" i( P, f. v5 P) ~. M+ l
currR[id] += redInterval;4 m! A& z; U' X3 I I+ l% e6 [
currG[id] += greenInterval;
! p0 s- u( h( Z* d5 J currB[id] += blueInterval;/ p& X$ a& Z8 e& }; s; u- u8 @
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 J/ ] l) o$ d0 V: F if(++count[id] == numFadeLevels)7 D" ^" L0 B9 I1 h" t) A
{
' I* ^' z6 }% |8 T" \$ c' H6 f fadeOut[id] = false;3 ^1 r5 S( b8 F+ [
}4 x; e# s6 P; u1 T' w
}
, j1 P+ t- ]2 Q8 B; d else, G. O( _/ ~ C: c
{* D8 B2 l) E2 ^6 S0 o7 N4 i/ R R
currR[id] -= redInterval;
8 W' }% G# Q5 B$ |
& H/ s9 a! n2 L; Z) E2 L% F currG[id] -= greenInterval;/ @8 \7 K' a+ D: l4 y7 J4 o
: [2 ?/ B( w# p0 x currB[id] -= blueInterval;2 p& W8 f6 p: V6 j) K
* K) b5 e5 Y: Z6 Z1 v' u C
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
4 L4 q' j; u( v9 D: r
7 d/ d6 g& E1 @! p if(--count[id] == 0)
7 p/ p S2 W- c. Y* R8 f2 {$ w6 W2 N
{
7 k# `4 l8 ~' ~# U- ?( N9 ?/ ~9 C3 b( V8 N
fadeOut[id] = true;
# r1 w5 R l T8 X5 H& q
' l- ^0 A* w, \' W- e# K0 ]9 s }
7 @. X6 N& F4 O# c- }7 U; O F
) l' O' r% P; _; y, O9 k/ J A8 N }
7 C2 n$ j3 S1 n' ^! q( j1 F2 ]% [. t( {; _2 b$ H1 b
if(continuous[id] == true). h O# m4 ?" r2 c$ D" i
* E4 ^* W6 [( H6 ^. ?" I {
2 ^4 p$ i/ T7 T, Q6 A. d$ w+ }3 Y, T" E% _1 }( N
document.getElementById(id).style.color = newColour[id];
5 h# C N7 \5 G& C ?
' Q; a/ `* V) @# u& K# F& \2 z0 { }
" D/ |1 a* I: h2 b5 t0 L" }$ |0 s0 r; x
else
{3 C/ s0 \: V) V6 [- P* e3 [0 [- S# H9 I
{% g: F( ]. q" J$ s5 k
0 I9 W" w6 M/ z- G document.getElementById(id).style.color = hoverColour;
3 b0 Z# P5 n* t. v4 \7 d+ b d5 z- U: d# ]+ c- {7 b
}" M4 d: y3 ~; ~, N3 c6 Q
" A, h! K2 k- ?- g' L
clearTimeout(tID[id]);5 g, l# c$ f- o: F8 ~
( l8 Q8 c- r+ h, v% ^ tID[id]=setTimeout('startFade(' + id + ')', rate);: h# g- N( N* P0 X' ~$ ?4 j
% m: I. o0 I( `
}. r0 `/ T. E9 k! k# q
0 V" {1 k4 N* u/ T. n+ E. vfunction continueFade(id)
' p4 D$ z9 u& T4 m) j
# g) b7 C; z# ?, x2 g0 W{
" H; L& i( ^, c" o
/ |" C# D# O# ?7 b& Y continuous[id] = true;
' D" e$ |7 E6 R$ z: C5 z1 P# e. D+ _1 D1 |8 L3 {
}
/ z% V! M+ W2 A! M, m/ [3 v. E! K) w# I1 r; t* d& y/ W! u
function stopFade(id)
. o$ x3 r {! h. m. P1 b
& e6 B2 F/ r( _* g" `{9 X/ J9 {# y- j: j! X% F3 Z
, T" `3 `5 X' g0 g0 B continuous[id] = false;- J8 q: s# J- | |! K8 g e
L5 T$ d3 |; M& r1 x* I2 [}; B: D) {$ g+ d# r1 n# Q" Q
$ O% L4 V! g9 e/ t0 H* ]
function StartTimers()' q0 R7 j$ s0 E1 `" W. N N
6 z3 S- W7 w. X% Y8 p2 x" Z/ W0 Z0 w) ~7 u
{ //set up an initial set of timers to start the shimmering effect n9 m9 r5 v9 j& E' K. x1 G
* ]' Y3 f. w, h4 X9 D for(id=0; id<numLinks; id++)) v, I$ O; s7 V) o1 ]1 ^
2 T' U8 g( |8 A5 d6 K
{
' \' ^* z+ L# k/ C) N2 l, e6 C0 d
* B5 v! l' p. N- a* { t=setTimeout('startFade(' + id + ')', id*100); d- a/ A8 z" b1 c0 ]
* T V; c" {. l. r: J }
7 u* L5 X1 k( g2 @! b/ }, F: y' P; j
}4 `3 y- m$ x: e* c3 K
$ l, J8 O6 y8 i# U: i
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')
; j, P- y5 I( a" c' O: m, e5 S6 S. }& K1 C+ S# H8 X& \, ^
initLinks('#FF0000', 6, '#FFCC77');
% b) t( ~1 ?6 J+ C( N* s1 P7 E
9 H) h" {, {6 W; X l//-->
; m K6 D0 A+ U+ {" F2 J& O8 n$ b2 e. f) C- ]" T3 H
</script>3 @8 i9 V8 w6 C( n6 g3 |2 Y3 G2 h
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元3 n( d. n7 P/ x
</a># h1 h/ N+ @- H5 v& b
<br>
L1 T3 x/ k% Q& R9 F% B( G<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>/ Q0 p$ q. D3 @7 y5 {; Q; s
<br>9 a# h. G2 P1 G6 C+ q' Z8 @; m- r
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>7 U: N( _5 u; u- z
<br> . R( N4 Z% y0 b0 z h
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
, O9 I/ l' g8 J<br>
- A J+ N4 }% T( L5 W; P<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
" g1 n' w' @8 x: Q<br>* h2 w" L# w( ]" y4 R0 P4 P; G
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>, `3 M# D; R! i0 k* ~+ Z& `
<script language="javascript" type="text/javascript">) x( g3 X B7 B1 H
<!--
! q a- z6 `. l7 psetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
: r, A. a0 S- w. }( F& T//-->
. W6 b B" ^$ w) Z6 ^, e</script> |
|
发表于 2008-1-21 20:48
|