|
  
- UID
- 133
- 帖子
- 51
- 精华
- 1
- 积分
- 186
- 金币
- 55
- 威望
- 2
- 贡献
- 0
|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
+ w) x! E* u) X8 b- y Q% V- B<!--+ f1 Q0 O7 r8 ?2 t) y: y( W
// convert a single digit (0 - 16) into hex
; z8 H5 Y2 Q. t' y8 Qfunction enHex(aDigit)( k( f ^9 h2 U1 w2 U+ J
{
% {( U0 R# r4 P* A! P return("0123456789ABCDEF".substring(aDigit, aDigit+1))$ b0 @# F2 w. m( A6 o% S8 h \* O
}/ V& E1 [$ P! R% A- I
// convert a hex digit into decimal
' i# N4 W2 e* a# Efunction deHex(aDigit)
" ^* `- y' k8 F* R" I{) d! Z! r X5 f* K1 E q
return("0123456789ABCDEF".indexOf(aDigit))
b7 q$ Y0 Z$ N( E9 {}& C' ^. T6 z" d g0 O: E
' Z2 T5 N d& m. C- d4 W" I0 M9 N// Convert a 24bit number to hex( o% ?- X) J. b4 S3 U1 h8 K* y. L" { O
function toHex(n)
0 H) e' `8 X9 K8 K3 {; M1 o' v8 S0 o{
: I4 G' ]8 j. b2 z: r$ w return (enHex((0xf00000 & n) >> 20) +3 q2 w) @0 Q1 @# C$ e
enHex((0x0f0000 & n) >> 16) +
5 \. j/ E* y% W enHex((0x00f000 & n) >> 12) +6 F9 m3 G$ `3 [9 y; o. w) z, C2 j- v
enHex((0x000f00 & n) >> 8) +) L9 q, s) ]5 }6 p3 K
enHex((0x0000f0 & n) >> 4) +9 S; S& {( D# _8 a* G* Y1 [6 n
enHex((0x00000f & n) >> 0))% K- x% l( r p) R! j! U" }6 J
}
0 m" D" k/ _, ^8 |// Convert a six character hex to decimal
5 ?4 z, `- Z R6 q" Q6 z) Yfunction toDecimal(hexNum)
. ^) [. V4 N* J3 ~" {{
7 h! I' D& ?- c9 V8 \ P+ e1 ?; P* i, s var tmp = ""+hexNum.toUpperCase()4 E) N7 N0 E& K3 g) D% {
while (tmp.length < 6) tmp = "0"+tmp
; H& X1 a% [5 u6 |; V return ((deHex(tmp.substring(0,1)) << 20) +
- \! a! H5 b5 X) V6 {# Z+ F. X (deHex(tmp.substring(1,2)) << 16) + , a, R/ v3 J- F2 B
(deHex(tmp.substring(2,3)) << 12) +. s5 }" r. B+ L/ U9 u9 Y$ g1 i
(deHex(tmp.substring(3,4)) << 8) +; N7 m1 a- f5 [! e1 n
(deHex(tmp.substring(4,5)) << 4) +1 F( e5 ^# n5 e: |9 n% a
(deHex(tmp.substring(5,6))))0 z2 V R: e) O! X1 Z- S" I( K
}
; ^2 b7 B+ z& x4 Q4 m$ x f///////////////////Shimmering Links/////////////////////& x. [- h, Y* O7 w3 J
//global variables7 a8 A! g1 d3 K2 B0 r0 r+ `2 r* d4 F
var hoverColour
" D5 }1 y8 ~) J/ @var numLinks;
/ `" z$ t5 d3 [) q7 J# wvar rate;
+ d; s) U0 n7 }0 X1 j" [2 A; Jvar numFadeLevels;8 l v& S/ k3 B0 I: e; B; N
var bgR;
. ~2 x. \& a. [( |var bgG;! c) c# s6 v! d4 H# I
var bgB;! O5 U: B+ P# P/ C& v# Z% p5 \
var currR;
! S2 l8 C8 I8 ]( zvar currG;, [; S9 [& G7 \8 D/ G
var currB;/ E! ? D' \$ @( \8 T' z9 Z
var count;
7 X4 Q7 Z* O% n0 zvar fadeOut;
- R! @* m4 a; _4 E' }7 z" L8 E& uvar continuous;
7 Q1 i( U6 u) c) r4 `. c8 l/ Q+ Nvar newColour;
" [, r8 U2 o8 B8 o: |8 `var tID;
' \, q2 a, I% E, ivar redInterval;
& O- g h' X, Z5 T6 K% yvar greenInterval;- M- {4 L$ G1 F/ o+ D) R
var blueInterval;0 | i( ^7 P/ J+ P
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)( V2 X+ S; \1 s+ E3 S+ A
{* H( d1 b9 z M
hoverColour = mouseOverColour;
4 d! y! `6 W. X3 h, _7 ~% z numLinks = numberOfLinks;( ^9 {: v. q( C
rate = 1;: {4 d7 S* I+ }1 B" q
numFadeLevels = 30;
a+ a; Y0 J/ ]/ B function initArray(theArray, length, val) P c' @' d$ l( R, ]
{
8 V r. ~ T4 D/ M. A d* [ for(i=0;i<length;i++). _# G: u o- r9 r6 R* O5 X# n8 B' E
{( W1 U {& ?. t2 y
theArray = val;
5 K1 C' B$ Y+ K! f' T4 }, Q }
& e7 Z) X6 n F$ O, Y; z, N }, y/ d" y5 S6 B6 \. D
bgR = '0000' + fadeOutColour.substring(1,3)
9 F9 i4 d" f! S m' C K# y bgG = '0000' + fadeOutColour.substring(3,5)
1 @3 ]/ R4 j5 v1 A bgB = '0000' + fadeOutColour.substring(5,7)0 k( H) ]/ H4 g
currR = new Array(numLinks);
3 s5 D; U8 J8 V currG = new Array(numLinks);
1 A O4 b0 U9 i currB = new Array(numLinks);
- I# ]$ O6 M" O" T+ q% F% v( J% k8 N count = new Array(numLinks);
; ?: r; G! E# K5 | k; G/ ? fadeOut = new Array(numLinks);
7 S* O% N) x& X3 s' Q- V" Z continuous = new Array(numLinks);
? M% f" z' @* m1 ]0 q9 t4 F newColour = new Array(numLinks);
& J' w/ ?/ ?/ r! M9 N tID = new Array(numLinks);
& ^; `- F' }1 D/ b6 O; N$ z redInterval = toDecimal(bgR) / numFadeLevels;5 K; T" S% P4 S' F7 Z3 d
greenInterval = toDecimal(bgG) / numFadeLevels;
, T# e. q) d* c' _! b9 G- \" P blueInterval = toDecimal(bgB) / numFadeLevels;
/ d7 p! i( f- k( _) c- B initArray(currR,numLinks,0);
& \! s1 {* ~1 l initArray(currG,numLinks,0);
d1 m6 c- ?" H4 E" j) P* @) w initArray(currB,numLinks,0);: Q5 A7 O5 S9 l1 Y/ T' I
initArray(count,numLinks,0);
9 X S9 ^) n* U initArray(fadeOut,numLinks,true);
: y% D& h6 a+ E initArray(continuous,numLinks,true);
9 e Q* r; o; x, W, {} 2 C7 _5 r* R" S& Q5 r
function startFade(id)
2 H$ n& {8 o6 v; |) g- B/ p" n+ K{3 |7 u2 u+ C) B7 v/ ~# Q2 G
if(fadeOut[id] == true)
) C% J: k) j# q- x% K { /*move colour towards background colour (increment)*/
9 p# g P6 m \2 c; n! N currR[id] += redInterval;8 @9 I! W" d7 P/ t* Z
currG[id] += greenInterval;0 Y2 @( M% c m8 t2 w# Q: s5 R6 `
currB[id] += blueInterval;
2 L9 K; |4 C1 r* r2 k newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);: A( w1 {9 L1 B/ b
if(++count[id] == numFadeLevels); Q9 x6 |1 z { ^
{
! ~; ?+ A9 c5 M5 M6 |9 F fadeOut[id] = false;8 r- Z: [2 |2 g# X W7 M
}6 u% w7 g: c# M$ X) I) o! b5 B9 I) E
}6 |% L! O0 x& Y% F
else
5 y5 I' C$ }$ ~) l1 R+ d {8 m! ~9 ~" p, d7 H& |
currR[id] -= redInterval;
% _9 n& R) U$ h' _+ o) l4 s' [/ |) c) ?7 b" e, \1 b4 \$ v
currG[id] -= greenInterval;4 I. x, L) W1 W/ p- L
7 f: i* B2 a4 D4 D& T4 w currB[id] -= blueInterval;
3 c+ _; h# t* w( l- h! z2 |2 Y3 y( V K c
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
3 E" J( T5 @8 N; D: j
# ~3 q# P: f+ v/ x- q' b% r* Q if(--count[id] == 0)% i) A* z$ F+ y7 }0 y' N' |: Q
* a% y, ?( j9 ~- J' F- v% e
{
% q1 u5 `. n3 X4 V& d- Z g$ n8 X& p7 y9 }% v2 \2 V
fadeOut[id] = true;: N' _% H3 N8 ^7 h1 Q! ^$ [0 @: ]
( u# q: [$ T, i; w }% u! H" ]$ @) n
2 [/ T/ Y5 J" m$ w/ \
}
5 ]3 j, V: v7 t3 h+ m& z; U$ s8 Z6 M- R8 C1 d% G0 \
if(continuous[id] == true)) Y; b- h: K) f% d* U
& {/ Q5 S1 M1 y2 D' ?# ]3 k
{" J0 V* l+ c# R- t' c" [/ W2 T
( e# ^& y$ s. ~6 k8 L! ]4 V
document.getElementById(id).style.color = newColour[id]; * p+ h3 B9 L" B- x
4 T4 f Z, {- N8 J1 x
}- J: P7 [1 v' W, R# Q; U
7 e5 y$ O* r$ w/ t else# H s8 U" y2 z4 n- s) ~8 t0 _
" G$ j/ c- l3 h. y
{
+ T5 ?9 ^" o$ D# I$ [; F4 R# U, v! x3 i, h, w( T! i8 ^, j
document.getElementById(id).style.color = hoverColour;
- k% T: ^8 v" @: A |) H+ k& ?$ z9 s' b- C' r S
}
9 q' m/ K8 h: O! L4 h+ t& H( q7 f# n3 j u
clearTimeout(tID[id]);
+ K/ }% S2 w( ]. ]2 Q' e# [
[) _ X% a6 @, N% c' e tID[id]=setTimeout('startFade(' + id + ')', rate);) Y, [& P8 w7 H$ Q
0 V& B0 R" r5 X, E S& {& O
}
, b7 e7 r* H! ~7 S y+ ^6 V) y# [- q0 ?5 `
function continueFade(id)
; K$ ^0 g0 _8 X0 s/ z
7 s" g! F# |( c6 ~4 b{
. k; l# K( Q+ }6 a$ e
" @: }/ U7 M9 e; ?' j' h continuous[id] = true;
5 `& i- S7 v8 v' M2 T8 P" j! o# V: u1 v1 E. q( Y4 s
}. p x* s3 z' ~4 }: R+ E
; a. {6 U. C. \# P, ofunction stopFade(id)
3 t# B! \& H c3 J' ?! x0 X( j/ l, C7 V2 G- {' ?( U
{
# `1 u( T' r0 I5 n6 p+ C u- v- W: M9 a( E
continuous[id] = false;
9 ?7 j3 H8 a2 f) `0 Q: ^3 `& }, S
}4 v8 R2 m5 X% @6 _) h% Q
B+ N1 {6 l& w& {5 I
function StartTimers()
2 k) k7 `5 g* ]
. N' u9 s& c! S0 s! G* O{ //set up an initial set of timers to start the shimmering effect/ k: X5 L4 X+ M: Q) t
0 C# X, l! b% d1 K5 ` _
for(id=0; id<numLinks; id++)5 Z2 ~5 l+ A% m; p. A# K
! @8 r/ ?; n+ m
{
3 E; ]% m. r( \3 U% R+ [% s- k
; p$ Z# L0 {7 t% ?2 V: r t=setTimeout('startFade(' + id + ')', id*100);1 c- T3 r* X0 i4 E
0 `& O% T2 T! X: t* {9 o6 ?
}+ L5 G* R; {3 j- l: W/ h6 I
! {3 R8 E: K7 i/ A1 ~% @* `
}
B7 k4 K% @6 L/ `5 o1 ]7 n1 r& b# V/ Z4 q0 M
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')9 K b. E, S4 A* j, O! T
9 F% L N% L% @# L3 pinitLinks('#FF0000', 6, '#FFCC77');( O3 R: I, h# j8 N- ^2 ?
5 j R5 ^$ N2 u# ?//-->
: u, ~9 J7 L9 \% F: H
; Y$ |; R) o/ x; e) K8 c</script>
& A2 }; ?0 {- t6 ^<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名：58元
1 J# U* y, T1 c. f, b7 j</a>5 v G O, ^& {! o. X9 R
<br>
, q( P. P1 N, }<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名：110元</a>! H- @- m7 x- S2 Q
<br>
2 ~# J- p3 {$ @/ V3 I; l7 o3 B<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>+ \ J5 d# e+ K; X: F; I
<br>
) g; B( J: e- m( i. L<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 s$ l/ }& `9 m. r0 E<br>4 K& A6 ?/ v5 t. x, y- R
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>5 a1 ?: ^9 o7 S: z5 u) i
<br>
* i9 t5 S7 ^& [7 x9 w6 O<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>( d1 {2 _+ H; Q8 R; V' K( Y
<script language="javascript" type="text/javascript">
8 h. U2 u5 K9 D<!--( D J$ N! M- U. r" {1 G
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering; r2 v% B# _' M* v, z$ ]) y5 u
//-->
' n8 v- @/ K. H1 M</script> |
|
发表于 2008-1-21 20:48
|