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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
4 `- @1 {) U' E. N, V1 P/ ?4 Q<!--% R7 |% k) r; W- x
// convert a single digit (0 - 16) into hex5 ?# ?5 |4 |$ K3 v
function enHex(aDigit)1 w' e" F* _3 q+ v
{
, \! b) X) l. L. L. j return("0123456789ABCDEF".substring(aDigit, aDigit+1))6 u# b# U5 E* ~, f
}
2 U- @! }9 j a, v9 z) ^0 M1 b// convert a hex digit into decimal
6 Z& s( Q2 i8 @4 o8 T6 y. X7 afunction deHex(aDigit)
* |& d3 ]1 c# V& c{( N- K# {# D7 G
return("0123456789ABCDEF".indexOf(aDigit))
5 z2 n' C# p$ O+ d5 Q$ Z}
3 u1 k# n* o5 k9 y- c4 F' n1 s, [; \8 U# \+ k Q* I& ?7 r6 S
// Convert a 24bit number to hex I, \ R( a' L
function toHex(n)
: S# Y' B! ^. |9 y. p5 _. E* S+ }{( @6 X8 ]1 ^8 Q/ @( z% `9 K" i" C
return (enHex((0xf00000 & n) >> 20) +
! ?1 ~9 L! k- x" v: q3 G9 e1 m! @1 F enHex((0x0f0000 & n) >> 16) + N+ }5 j, r3 ]8 R" w+ z
enHex((0x00f000 & n) >> 12) +# r/ I, L: X* a/ E' z- X+ ~
enHex((0x000f00 & n) >> 8) +
9 O1 k" s6 |" l enHex((0x0000f0 & n) >> 4) +. J2 y" }8 ]5 z# _+ {
enHex((0x00000f & n) >> 0))' @7 E8 y* r& @0 a4 Z' ?
}$ d6 z- E) r# u+ \2 x& v0 y
// Convert a six character hex to decimal
( I0 [+ g4 e. e! f( ^: ofunction toDecimal(hexNum)7 d6 A- W. h# X0 y) S
{* ~! r) w( P2 U- z$ X, O2 Z# ~
var tmp = ""+hexNum.toUpperCase()/ O# H3 |" C! B# ?" Z
while (tmp.length < 6) tmp = "0"+tmp
, s8 T/ ]1 U: z# K& M9 t! W return ((deHex(tmp.substring(0,1)) << 20) +
$ q5 Q2 ~0 @8 m3 s+ X6 [: H# v (deHex(tmp.substring(1,2)) << 16) + 6 c/ f: i9 L- y+ C" `2 F
(deHex(tmp.substring(2,3)) << 12) +
) }; X8 U0 i) z& w8 I (deHex(tmp.substring(3,4)) << 8) +
; s8 D. }8 k+ \9 X1 K! F (deHex(tmp.substring(4,5)) << 4) +
! }' B: l* F6 B; o6 ~ (deHex(tmp.substring(5,6))))
6 J6 W8 A1 v9 K}* p/ L1 n0 t8 ~! _- B( k6 x
///////////////////Shimmering Links/////////////////////
! p4 F: L m' I2 l6 f//global variables
" n( _6 A' S* r+ p U0 ivar hoverColour4 N0 x8 T3 e! N5 J. |/ ?
var numLinks;6 ~: G. J) Z2 D6 M3 a7 K6 d% G
var rate;
4 \. i3 S( |4 c6 H6 I0 \% z- |var numFadeLevels;5 C3 E, U- i5 p( _
var bgR;! g. v0 i- K: V& Q3 Y$ F
var bgG;
: {- Q, ~+ {5 F" d# I( s9 Tvar bgB;
6 F/ [5 Q" o2 q- y& z, Dvar currR;& G% g1 ?- n& |& |6 ?
var currG;
# }4 |9 V5 a6 J x. v% Rvar currB;
2 \, y- p+ r; H& P* T! x# K: Uvar count;9 {, Z1 r" t1 B6 t2 D( \
var fadeOut;+ Y$ [2 ?3 D& C+ i2 D2 r+ |
var continuous;4 z' t/ I r( |/ K9 _8 y% R z% h
var newColour;
% Z( w+ |; ]# f7 r& N/ Pvar tID;
$ |. C. x5 s9 C8 {var redInterval;
1 ]2 Q" Q% }- F3 X3 ~& vvar greenInterval;
r) }+ e+ k/ Q5 \6 I/ xvar blueInterval;4 u0 [, l+ G; ^$ j* a; H
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)4 u" I. } Y* ~
{. ~+ M$ l5 w! J1 t) N
hoverColour = mouseOverColour;
6 V0 Y# G, B& y numLinks = numberOfLinks;
7 {0 R# Z0 C/ X. B4 v rate = 1;
Q! j# F( m8 M+ J0 w numFadeLevels = 30;
1 }; k) ]7 ?, c, x function initArray(theArray, length, val)1 W3 o) s8 B% O; f% W# ]
{( `" t: b% l2 t8 p' K F7 f; i
for(i=0;i<length;i++)
# `9 f1 N& r4 n% i/ ? {, H6 @- k" Z. K( R" N& H4 A' ^
theArray = val;0 ~2 D5 w8 g P1 D( \
}
! A6 ^& W; g9 S, P }, W8 [+ V5 f. Y" r
bgR = '0000' + fadeOutColour.substring(1,3)+ w* P7 b* E& K" p
bgG = '0000' + fadeOutColour.substring(3,5)
7 {1 }2 @1 B6 S- s bgB = '0000' + fadeOutColour.substring(5,7)
5 ?$ p, o7 `( E" v b$ r currR = new Array(numLinks);
" a8 e& [4 s4 t' [& A currG = new Array(numLinks);
3 \, `3 c6 t' b currB = new Array(numLinks);- n) Y2 \/ l. C. X! k
count = new Array(numLinks);* ~6 l# V3 r' u: H
fadeOut = new Array(numLinks);
& \$ l' W m7 Y$ C8 [. O continuous = new Array(numLinks);9 }3 X3 h& f: z; g. u1 N* A8 s0 }7 _
newColour = new Array(numLinks);' B% E2 f0 d, k/ p: ]1 E
tID = new Array(numLinks);/ E* P$ v5 x5 t9 U. n& ^. \* [
redInterval = toDecimal(bgR) / numFadeLevels;0 v: w7 c ^- Z7 T2 l5 o( T- H
greenInterval = toDecimal(bgG) / numFadeLevels;1 X, n9 R$ A# V8 s' u! b
blueInterval = toDecimal(bgB) / numFadeLevels;% u8 j% M4 w8 S- ~/ `/ ?) o& L
initArray(currR,numLinks,0);( }5 @5 c i n- @2 A
initArray(currG,numLinks,0);
2 Y; J3 l% W3 A initArray(currB,numLinks,0);
! Z% S, n" _- D/ e initArray(count,numLinks,0);% P' L( _ p% f9 x
initArray(fadeOut,numLinks,true);7 L' \' h: y" U6 H# X
initArray(continuous,numLinks,true);
7 o. \- D! d' Z' Z7 o- p}
* i8 z3 v- L, n/ ufunction startFade(id)2 r; V! Q3 D( N
{
) g& j) }% z" J: k. [& `& h if(fadeOut[id] == true)
# u! Z% y0 C: K4 q. n( [5 D { /*move colour towards background colour (increment)*/. Q4 [8 I, Y/ A8 x& B) ]1 ?
currR[id] += redInterval;
0 |9 \ o3 G8 ]. Q" n. t' f$ f currG[id] += greenInterval;
1 }, H( w$ O/ Q' U: D currB[id] += blueInterval;! r7 f. b' g4 }! n% O+ `; H
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);) o8 i/ ^0 t) A* d0 V, _2 E
if(++count[id] == numFadeLevels)
3 F/ g1 O( d- D, U {3 R. h( W' R! W
fadeOut[id] = false;
, p8 s; k+ N& L, D" J( E$ w }9 ~7 c; x, E! o5 e* q# u# r6 S: {
}
# A" g) U6 P; d! y else
- U5 J3 X$ O) b/ T% v1 J {7 l3 q- U' A; H/ i9 S K
currR[id] -= redInterval;
7 i% e, `& V4 A0 j5 v; l( c# ^0 R/ ]& S1 {
currG[id] -= greenInterval;- e' S/ G- F& l c! [
* ~% q; s0 q2 U. A- w8 _
currB[id] -= blueInterval;6 C& ?- J! S- b m- j
! O: T2 T4 h0 a newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
0 Z9 d* \" ~% X" |) v2 Y4 \/ z& {; C: W5 C3 L
if(--count[id] == 0)& ~" g% S3 y5 x; M6 C
+ v/ O5 d' F I; H {
* |" q! R7 V. i: Z$ M: y1 p( h" s. K+ C. G
fadeOut[id] = true;1 S9 ~2 U3 Z# A; l$ D3 a$ p
- W0 j2 k2 k. C
}
6 W& X1 C) o- z! h: m, C' l- B; Q4 ^2 N; s
}# F' j" B' _) M% I) F) F1 T
0 G' j$ q% C$ [5 C3 _! s* e8 K if(continuous[id] == true)% c. `5 z# c" v2 d9 t& y
1 W8 t3 d! A2 M4 ` { U2 J$ P9 `" V5 {7 p" c1 s& R
- B% p( ~* t; q3 Y! E document.getElementById(id).style.color = newColour[id];
% a/ m6 {7 s J, R9 A0 P
2 a: x' N D+ b8 B }
2 A- N. g2 D! h/ S7 x {; a2 k6 A
" b5 i* F$ |5 H6 t7 Z+ k( k# o else
9 \7 K4 q9 Z# t% K/ a
( O# q9 |4 V/ N9 E0 j {
/ z* r. \& ~/ b. x
/ |, U a6 B6 R; E+ I3 Y document.getElementById(id).style.color = hoverColour;
4 v( R4 v8 K3 x$ w
$ f0 f& F5 a1 m$ q8 G# b% \* j# \ }& a: G8 v, r9 v% _5 t
/ V' b! K; w. S9 A
clearTimeout(tID[id]);& R7 }: p& B+ n( L9 I- w* n i: i" x) s( M
8 |- m& M8 {3 o ?, o# q6 b
tID[id]=setTimeout('startFade(' + id + ')', rate);
: e6 P6 U& c" P3 t8 {& s4 [
8 ~* e8 |% x9 I8 D3 a}
3 D+ m& f7 ]3 A" h u& _ U
# n0 I e8 `# `5 S( Qfunction continueFade(id)
$ M, l) t# U; a/ J% Z
! ^+ e8 w7 z7 r$ Y0 ^{
/ Q `6 p( ?7 \/ X) b9 |. b# f9 M2 @0 ?" g# @' |1 V1 V
continuous[id] = true;
% \+ L$ K8 B; n
' v1 C* [% n& D i2 c* J2 Q}, u7 t0 D$ p; m' u
( J0 M2 l! k* b. q" Efunction stopFade(id)
- w) F$ O, W' A4 s
# K: b: V9 d8 i{* I4 D8 V+ `1 t7 f: U% K7 B& P
+ Z4 `( F# \( O4 R; J9 q continuous[id] = false;
7 L& }$ |* r6 h0 O; x$ I% _2 ~
% H! P8 @8 b0 L}% r0 ~ i j7 y$ a) S# B
6 p8 m( ~; [0 ufunction StartTimers()
+ H6 m' |* x0 o0 n& J/ B v' F% r) p! F" m \9 _+ G6 f
{ //set up an initial set of timers to start the shimmering effect3 l; O. Y9 Q- w w9 A' f* q* s$ K
3 @* e5 B- \: d+ E. s1 {
for(id=0; id<numLinks; id++)
/ s1 m/ f7 _6 f
$ H" M3 E6 m, ? {( ^# a0 X( K, c- r
, K2 H* d- g& d t=setTimeout('startFade(' + id + ')', id*100);0 H) ~& i1 O! N, J% P$ c
8 e- }6 r/ K: w$ l; {% b6 J }
9 C J' Y5 V* S* x, |
& g% q, Y0 a7 J}
, \1 s7 N! j& r5 R2 O" s$ R3 C2 B9 j, t4 Q+ h: j9 X! m* c* S
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')2 G7 ^2 {, g, L# H+ V! e; [
( e0 U- o/ I) s; UinitLinks('#FF0000', 6, '#FFCC77');
c7 |' M2 v( x% D5 X' h5 m) p6 m& T4 d7 w- _" B
//-->4 K0 b- n) N* v. B
* I! `! l6 _1 c& g6 w
</script>
8 g& N/ V) ~ g5 O4 y; ^# O<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元% A1 q8 F' |6 _. v2 o& R7 b3 A! G4 ^
</a>
D9 d" x5 N. f- ~8 X<br>, i9 ?: g9 h8 t4 k: T6 J6 i7 g! j
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
7 H1 g" Y+ m9 ^* d<br>6 p& Q' ]2 n% T9 Z1 t. S
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
( |( V# S' ]1 q+ R<br> 1 G' ]# o3 p- D8 p2 W
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>: }3 R# e4 f3 @4 U
<br>. x, k: H5 i1 h7 q) [" r8 O
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>! j8 X( K; F, I* {4 L; }: p& p
<br>
: c1 ?* m* ^7 e7 W<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>2 O: h. ~! C# V9 y$ ^
<script language="javascript" type="text/javascript">" s3 F" h7 a" k7 \8 V Q* s
<!--# B( O- ]/ `, v9 M
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
b' ^' l) n/ b3 U7 p! c: D//-->
0 ^$ a. ]; @# K2 P* N" G/ z</script> |
|