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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
2 `6 |) Q ^) Q: w: \<!--
- k5 }$ |6 B( o- G// convert a single digit (0 - 16) into hex
s8 V" S2 Q4 e7 s A! z7 L6 ufunction enHex(aDigit)6 {3 ~! A- o% B0 {# @% y
{# g5 ?5 E9 T" A- T5 K: E+ [
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
$ o* G5 X2 A/ R4 `2 b2 D}
( B2 _9 b! ~8 I. H1 e3 N2 Y// convert a hex digit into decimal
$ k" C8 M6 _+ H/ Gfunction deHex(aDigit): @; i3 Y* w5 v9 u- P4 O1 j0 k
{
* U x5 O; C* H* d7 a return("0123456789ABCDEF".indexOf(aDigit))* j1 b5 |5 j! S% n u
}$ d9 ~' P. |5 L
. b- v0 h+ S5 ]+ Z! H1 G( g
// Convert a 24bit number to hex
; c2 C, D1 P; C5 |1 U' s3 M3 I6 ]function toHex(n)
4 H" C. F5 i2 @7 @& g2 `{5 f/ ]0 c j6 s U# i9 t. x2 f) w0 P
return (enHex((0xf00000 & n) >> 20) +/ n- l: l" a' C1 g" A
enHex((0x0f0000 & n) >> 16) +! G( Q# V' @ E9 W$ G
enHex((0x00f000 & n) >> 12) +
' u( T5 ?4 m8 I; ] enHex((0x000f00 & n) >> 8) +1 v6 j# }/ {: s' D& L9 V" l: F
enHex((0x0000f0 & n) >> 4) +
4 i- e8 j" t: f" F( X. P; ?) z) C enHex((0x00000f & n) >> 0))/ Z/ w {9 Y I2 i( b5 `* e/ l
}- b Z: _- p" P) L3 {! I
// Convert a six character hex to decimal2 a4 P5 I3 ^ r- p$ f
function toDecimal(hexNum)
% I( L) u- S7 e- J$ N{1 n! p3 f0 K2 [ s h' V2 Q6 q
var tmp = ""+hexNum.toUpperCase()
, ` ?- Z4 N$ |9 i& S0 p while (tmp.length < 6) tmp = "0"+tmp
+ k/ j" g1 t8 d& y8 Y9 p2 x return ((deHex(tmp.substring(0,1)) << 20) +, _2 m0 O |& x
(deHex(tmp.substring(1,2)) << 16) + / K2 Q; A @, f& g0 t y* n
(deHex(tmp.substring(2,3)) << 12) +
/ a! b7 x5 E) `6 e1 N; |0 I$ }% ?* d8 s (deHex(tmp.substring(3,4)) << 8) + T! _4 R' B6 N; V. n( m% j# {
(deHex(tmp.substring(4,5)) << 4) +( ~: [0 X7 K' R
(deHex(tmp.substring(5,6))))
' ?: @+ W: C, x m. K, m* N) I}
8 G3 U8 N) E: `" F) e, b- S1 ?///////////////////Shimmering Links///////////////////// _9 u. v: q" r* R, N
//global variables$ r4 }" p) w5 {, P1 p( Y' T
var hoverColour
' K: D, ? J3 \& ?var numLinks;5 H% E6 N+ X9 O/ R6 g% n& y
var rate;
# ~$ ~& J. B: ]4 L2 Pvar numFadeLevels;! m0 X* ^% E1 \( [
var bgR;
6 q N. v' N; d$ [5 Avar bgG;
- c3 [- e( Q# Cvar bgB;
! n4 d6 | {$ W* X0 x, M# ^var currR;/ t% v# g) U7 T1 f$ M
var currG;+ T- w3 J5 |' o* f, k' \# ]
var currB;! z8 P; ` d" e; ]9 d6 @
var count;) B/ U: Q; j4 ~
var fadeOut;) _0 q9 @' v3 c, s) \: V6 W9 [8 P
var continuous;
% q8 {/ f& F3 z- s2 m! t$ Ivar newColour;
* e( c/ o& O; m1 V3 u+ Pvar tID;! t! \) v x Z& S9 I$ b, l
var redInterval;3 S* G% Z& b4 j- |8 Y1 k# \! g
var greenInterval;
; c, y9 P' d7 G/ x8 v: nvar blueInterval;& g" `4 M$ W8 {! E* [# w# t9 ^
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour). M( c4 K8 _+ Q0 {" g
{
I6 K9 J) ^) b5 d( a$ v+ g: d1 k; ] hoverColour = mouseOverColour;9 X# Q) w! A3 I8 k" c. M
numLinks = numberOfLinks;
# e8 I7 }% s. P' @ rate = 1; _) o3 x/ O+ n
numFadeLevels = 30;
6 C* `' n( `( j function initArray(theArray, length, val)
$ \1 ~" ], |! n* N2 K1 B {
0 _9 m& m7 k2 m- } for(i=0;i<length;i++)
5 A; C K+ D; F7 c5 q! a5 l& Q {
j7 y# \2 M& O6 D) o2 f theArray = val;
6 d! {5 \3 ~9 i) | _! r }
/ {$ h6 q* @' w4 t }; ]! t) R% E& B$ N, [' M
bgR = '0000' + fadeOutColour.substring(1,3), r7 I) G2 K! w+ @7 @/ k6 U" K
bgG = '0000' + fadeOutColour.substring(3,5)
# S8 ~% P* E5 M: F bgB = '0000' + fadeOutColour.substring(5,7)
& N' G2 I5 f5 ?- I& ?! [7 ` currR = new Array(numLinks);
# ?- }0 v2 R8 L1 k currG = new Array(numLinks);
3 y+ s1 }# c2 w1 ~; s9 Z currB = new Array(numLinks);
$ L" R( ?- H' c y4 Z8 f) l0 l count = new Array(numLinks);
; E5 m/ M! A( U2 ?2 U! r Q( ^4 C fadeOut = new Array(numLinks);, w A& }- H% A( O& y* l9 m
continuous = new Array(numLinks);
2 f' Y& z2 E. ~$ R newColour = new Array(numLinks);
: @( X5 e/ H9 t! Q tID = new Array(numLinks);
2 y! |' T" `: L& F redInterval = toDecimal(bgR) / numFadeLevels;
7 V% c$ N9 [; l) y Q greenInterval = toDecimal(bgG) / numFadeLevels;$ Z8 a% i. z8 G# J
blueInterval = toDecimal(bgB) / numFadeLevels;3 S* b& R: ~6 p6 i% u5 `( z
initArray(currR,numLinks,0);
1 ~* U8 `6 J; {: } initArray(currG,numLinks,0);
% O7 y7 k9 p0 L# f5 E1 @; Y$ H initArray(currB,numLinks,0);
+ z; Z- g- m8 V. B0 `$ X initArray(count,numLinks,0);
! [' B# P% }/ f% q. t' P& ? initArray(fadeOut,numLinks,true);$ c3 G+ w8 F6 Q1 u# B
initArray(continuous,numLinks,true);
) t) ^& u3 G$ p/ I: d3 Z4 `} # y( O% r% R" z
function startFade(id)+ C" x8 h, i4 u. Q4 y
{
/ {7 F1 J( H1 I2 S) w7 r if(fadeOut[id] == true)3 l+ U4 x7 d; C
{ /*move colour towards background colour (increment)*/4 a. j8 t: [' E
currR[id] += redInterval;
1 Q4 c9 T& b5 V currG[id] += greenInterval;
5 Q% P+ ^7 m I, m5 ` currB[id] += blueInterval;
L0 T9 N/ N3 X. v, p% M5 C newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
: o j4 F9 l" A/ C- g, k( L- c if(++count[id] == numFadeLevels). o5 e' G$ b! _! {
{* r. j4 w# K. W% p e1 O
fadeOut[id] = false;
$ k2 E) N0 o) @ }+ s! k+ |+ ^" v, k2 E$ j7 m" {. _
}
4 \1 H" Z, s) A7 N else* U. q4 |! c9 p# S
{ a; ]: c. D& F: e/ \
currR[id] -= redInterval;- p2 Q$ Z+ P( h2 q! G, r& ~
j9 @! C- y" i0 n, D+ {( v* p, a currG[id] -= greenInterval;6 R3 W6 H0 y3 l% h
2 l3 N. S- L# L" _- ] currB[id] -= blueInterval; ~# I& n/ |' ^8 A3 M
; C [. X/ \$ b! a
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 h Y2 R3 f1 ]: t2 ]: ?' n8 S9 e5 m( w3 Y S
if(--count[id] == 0), O: @4 t/ B$ `- U. N; ?
: i) L+ f5 Y$ h% c3 F0 r
{& ~! I, u7 m8 g% D7 L' g
2 L* v( Y$ u/ D. b% k3 d+ m
fadeOut[id] = true;
( \& M) K7 B0 N$ }, A" a3 b
3 N: F% I0 `! j% ? }
4 Z0 w1 {' k$ a5 k+ [+ N- ]& E
8 o8 Z0 |" `% |0 y }( F9 O8 h# p- Y0 b: [ X
+ T9 G9 N" H( k4 f
if(continuous[id] == true)0 }+ e6 o4 n1 M3 U9 C: a) S* x4 F% F
1 x5 _: z. X( S4 P* Y8 ` {9 \9 g+ |( a I. F6 e! v5 g
/ n9 F& U( g" Z+ u: Y8 f7 |
document.getElementById(id).style.color = newColour[id]; ) o( @& R6 U0 ?: @ y& V
- R* ]( n: ~6 I9 J1 Y
}
: a! ~. o5 ?4 o, o" ?0 F: z3 J7 L, ^0 l0 |6 n+ ?6 w [# c) m( v
else# ?0 c, u: C( {
; w* e2 k% H0 o8 Z* E+ y" [
{
0 ]8 h( c+ `, B7 F0 i7 F1 j, }# n7 E& }) y
document.getElementById(id).style.color = hoverColour;# |6 N$ k. Y# | Q
; Y7 J; x% h9 l C1 o
}# p; P( M# Z+ Y7 R$ d6 q
- h3 M; |% \1 r8 \! |6 h
clearTimeout(tID[id]);
8 @; R# D ^9 W& S2 E
" l9 n' M# X* z, N- @3 F! c& J$ E, d tID[id]=setTimeout('startFade(' + id + ')', rate);3 D/ l: p! C/ a
8 j3 j7 P R1 p
}
! W+ V. O+ q" c( ^7 S- |
6 x. l4 Z3 ?; m7 e7 ^function continueFade(id)
/ p }9 q" v8 Z, N7 ]8 _) N) j) h( B2 ^
4 d* p+ o+ J7 ?: O{
( K% Z# }4 U+ X' e3 K, k# M/ B
& w* B4 l3 Q& R' N' [/ Z8 {/ A0 O/ ^ continuous[id] = true;0 q4 _3 o6 G: d- h
: Y# B+ F9 M5 z}. n+ b$ \* K( @; Y
1 [* W' W$ Z) ^9 J
function stopFade(id)
$ M: @$ K, Q" @( j
2 O9 ^( ~) @- ?, y" A{
" U* U" a# u. A3 J3 Y" G6 l6 g) x- V3 f* `, c& P2 E- E
continuous[id] = false;
* R/ ~' G2 ]' d8 D6 r( D/ H+ O
/ U P* A/ e% w9 b) @) R9 k) j}! @7 x6 H; g3 i( X! h" ^
4 h8 x* J7 N0 d0 J. U% y+ y% Zfunction StartTimers()
: l# a& a+ |4 A/ |
/ x4 a6 |5 q+ n0 ^( N7 A{ //set up an initial set of timers to start the shimmering effect A: \) B6 h/ E5 O2 l
+ K9 s, T/ B# C% Z3 V* t1 K \/ W# ~
for(id=0; id<numLinks; id++): k- I& r6 i: l( b! Z+ O" W0 z
! c. p6 n. U" }" y) [% B/ C {
5 ]1 w$ @) m9 t1 v4 D2 s {' t& S. C7 z/ a
t=setTimeout('startFade(' + id + ')', id*100);# s# ^. A+ j$ x! i
* c H) x. ^/ G0 V4 e
}' [; q- W% n4 z+ _
" b" u! K0 H% \7 P}
2 e3 K' ?% E2 R' d# y# n+ R( E9 k, y8 B; T* n# M. `( x" @
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')- `3 W7 j$ L. O E
2 } `- a# \2 ~' [9 SinitLinks('#FF0000', 6, '#FFCC77');- K4 P- Z5 I' T }" F4 Z
- E6 H3 w0 C* \6 @5 R9 Z+ F- m//-->
! t5 r0 f- ^; x+ \. s( T) r# W Q( ^' ^$ i: D% Z" l
</script>
1 h2 H: a* { f- ~+ A5 Z<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
" A6 ]' N5 a1 N# L) i</a>
9 ~% t" X" s) {' p& }; P5 w! |8 }<br>4 M N) N2 U: H& Y% W
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
9 w: @% R3 d+ @7 U( {9 d; \<br>
/ z* l; i! `1 q: D9 m<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>. |" H* ?! O/ J1 Q$ z
<br>
- y" j5 k# t, z* z1 Z0 J<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>
0 {( \. o' h7 @ X! C<br>) R( `' v- _+ R) i
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
, O- u% V! R3 C<br>, i+ U: b, Q1 T! ^3 s! h0 A! k/ i
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
( Q. [2 X# W/ f+ H; F<script language="javascript" type="text/javascript">
. x8 C0 E9 s s" g' z. Y( b+ S. X) D<!--$ V$ u% Z3 O4 q2 J/ n. g: n
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
. K& S9 Y# `5 C! [! x6 p//-->
- h! G* q( l+ I7 s5 l) f* l9 v. x% }</script> |
|