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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">9 F1 R) w" ?% }
<!--) z5 ?' Y U2 a" U% }1 o$ L. f
// convert a single digit (0 - 16) into hex! K! J$ \/ o* B, J' d; ?
function enHex(aDigit)5 Q7 I" N3 | e3 W8 G( n! S- d1 r
{) k: e5 C+ v% q% h4 |0 I/ |
return("0123456789ABCDEF".substring(aDigit, aDigit+1))6 F* u6 L) J+ ^
}( K! k0 s" K" Y/ t) N
// convert a hex digit into decimal/ c: b. L/ b% C4 l, U4 [
function deHex(aDigit)( O# K- B) X9 ^: w/ }7 N
{- i/ f8 j$ N/ c
return("0123456789ABCDEF".indexOf(aDigit))
# H3 v. N/ r% a6 v# a}' O3 y' W9 M, u0 Q5 J3 L
% e2 Q4 s8 A+ r
// Convert a 24bit number to hex3 k$ Q0 X: c( S& Q+ _4 Q
function toHex(n)2 ?5 m# S7 e( G' x" F$ k! K
{
2 L8 J; ~# _# z& j return (enHex((0xf00000 & n) >> 20) +5 F( L8 p3 a9 N( d
enHex((0x0f0000 & n) >> 16) +9 q0 c3 o& a3 g/ P4 `
enHex((0x00f000 & n) >> 12) +8 x/ q( o; {+ M! s2 H
enHex((0x000f00 & n) >> 8) +# B$ K2 W1 X1 F
enHex((0x0000f0 & n) >> 4) +5 `5 P, K( r6 u/ b$ f: p
enHex((0x00000f & n) >> 0))
3 `, } |2 v+ K/ |}- X& D* z* f0 F2 e
// Convert a six character hex to decimal
- P4 S" i J n# S( L) pfunction toDecimal(hexNum)
% B6 `4 |5 q- d+ q0 P# R{8 {% |5 F9 ^" n4 l
var tmp = ""+hexNum.toUpperCase()% D; I0 n v6 `" D0 {3 z
while (tmp.length < 6) tmp = "0"+tmp
* ?1 d8 G+ _- v return ((deHex(tmp.substring(0,1)) << 20) +
/ f; X% v( P: j7 S& ?) C' N (deHex(tmp.substring(1,2)) << 16) +
. i2 u. n' ~+ E) T3 M- X$ F (deHex(tmp.substring(2,3)) << 12) +
9 N- I. H+ s3 V6 L2 B (deHex(tmp.substring(3,4)) << 8) +' ~# q6 L- e* f
(deHex(tmp.substring(4,5)) << 4) +
# r1 s8 C' K$ Y$ O (deHex(tmp.substring(5,6))))
! i. l p5 v. v+ k R2 r}6 ^6 v! h7 }& J1 i0 {% c
///////////////////Shimmering Links/////////////////////
5 ~+ \; P1 q7 w1 F% H//global variables5 }% s5 F. @: }2 P# h
var hoverColour
J3 W/ f' C" M1 H, Qvar numLinks;- Z- O6 f9 I( e
var rate;0 g H' s3 z: d1 B
var numFadeLevels;
3 ^8 s- b1 M" |2 \+ l+ ]1 |( zvar bgR;
' N7 q$ B* y- t2 T- z0 ^9 xvar bgG;: R/ W" U8 e5 X& W
var bgB;
, n- f+ [; Z e, N3 uvar currR;1 K5 y+ u3 g) \5 O% _* w
var currG;
7 z0 {( q; i. Y$ h$ Dvar currB;
' c7 y, c6 k5 i3 B4 Zvar count;* g0 ?. X @6 I
var fadeOut;
" x4 S5 _4 j1 H+ I/ V* D% v! `' Ivar continuous;$ u; i2 Q" ~8 A% K. z
var newColour;
1 T, O8 I# `& M4 F& @: Hvar tID;/ Y5 P- S( l9 ?7 F
var redInterval;6 c& H+ n& m; H2 _/ ~7 h# n8 ^
var greenInterval;
! E T2 E7 W" wvar blueInterval;8 ~4 W% m8 t- X' b2 s# S" t# n8 k
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
% X, F5 J E( K1 f9 f: S+ {. T{
1 Q1 n% ^" c: L+ |% t; h6 b hoverColour = mouseOverColour;" D( O3 U8 M6 D+ R! n4 l$ X
numLinks = numberOfLinks;
2 h% D( B$ T4 C4 |" x3 ~9 _* l rate = 1;9 s% S& C! U( O) H& m
numFadeLevels = 30;! L* L# B! P9 w0 n6 y9 a' k& P
function initArray(theArray, length, val)
4 m; Z& u! Y3 f' Q- \8 m A {
& U c# p# |4 f for(i=0;i<length;i++)" m- z$ }- R5 h" ?5 s
{6 `) B7 D) H( N
theArray = val;
3 _/ }9 I) D Y3 k }* W' b# X; O: |) O, g" ?$ S6 `
}( ?3 [2 o" E9 ~- h* @1 L
bgR = '0000' + fadeOutColour.substring(1,3)$ H/ X2 G# a+ n% m( R+ b( f, |; h
bgG = '0000' + fadeOutColour.substring(3,5)8 `( W5 B a( ]$ h
bgB = '0000' + fadeOutColour.substring(5,7), z/ v! T# C8 i
currR = new Array(numLinks);- ^& X' f. n' K: `) {" J. s7 x
currG = new Array(numLinks);9 p4 L: Z# X) c; ?2 Q
currB = new Array(numLinks);* Y: V0 R6 p a: \, L: `
count = new Array(numLinks);0 W9 k) L. X& G
fadeOut = new Array(numLinks);
" Z; Q. w) C7 g5 f/ o; ~2 T) w continuous = new Array(numLinks);9 F0 b/ @ b0 _+ v$ b- a
newColour = new Array(numLinks);! u. j/ ? m$ F, a
tID = new Array(numLinks);2 M. P& S2 F6 [/ e* K6 ^
redInterval = toDecimal(bgR) / numFadeLevels;
2 Z0 f9 n9 {: J: A- P2 T greenInterval = toDecimal(bgG) / numFadeLevels;
7 t* `4 A0 L0 X0 y5 S blueInterval = toDecimal(bgB) / numFadeLevels;
- }, B; C3 E) h" v' _, U. `0 d0 @6 Z1 d initArray(currR,numLinks,0);& _: V, R6 k1 a4 H% k
initArray(currG,numLinks,0);7 A; L7 ]. i+ y* \
initArray(currB,numLinks,0);
9 ~8 `" J; |' ]3 e, M/ }( i initArray(count,numLinks,0);
3 \- X- A4 W) G initArray(fadeOut,numLinks,true);, z/ D3 _: m* ^( S" ]" W
initArray(continuous,numLinks,true);, u0 v! f& j/ ?* I. g. S! z, }
}
' a4 x) {3 s: U+ P9 e) |0 lfunction startFade(id)
7 i- L2 Y! l9 j7 j{
" J) }% h& E9 \; G b z" D, Z0 @, s if(fadeOut[id] == true)
: ?- C1 g# x. I7 ^7 { { /*move colour towards background colour (increment)*/; h8 R: C% F M" v( b5 h
currR[id] += redInterval;
1 ?2 Y9 c, {7 t currG[id] += greenInterval;* q: c8 B3 U, A, a
currB[id] += blueInterval;0 u& P1 } c! \ Y
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
1 O2 Z* e c* c+ F( { if(++count[id] == numFadeLevels)+ m. \) w' ?+ `+ g2 r( ?
{
$ M6 I4 I) [: V* j8 K% t( R fadeOut[id] = false;
7 I! o2 l* z- ^' W* i* b }2 `2 O# f8 O% K- B. r7 v) U9 i7 W' i9 k
}
0 P8 c. a3 V% v% H2 U2 N else. [5 U! ^! Y! V1 V3 C$ z& ~7 n
{9 f9 @' V. X7 p; n7 A
currR[id] -= redInterval;
9 W/ x4 P+ {7 `7 q" I/ y3 J
1 R8 }8 T; Q9 a" _/ G currG[id] -= greenInterval;2 ]' x; P/ M* P0 x6 r
) ~. H' y& w6 S4 h/ A$ x8 a% W currB[id] -= blueInterval;
9 i+ l# w$ i# q9 q
5 L3 X- v1 Y5 \/ } newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
5 L5 [5 A0 Y; Y0 f f" m K, x8 A* C
if(--count[id] == 0)
5 y4 g6 d9 l/ |2 Y% a9 J, ~
" p1 _& h u. m" C: ?9 o7 C {
& ~ U: U+ a- _) X; t& d6 z
9 Z4 Q" r ?/ y+ Y$ q7 n9 y fadeOut[id] = true;1 z0 J! M3 l+ [+ ?. k
, U9 A( ]5 g2 E9 e }/ Q! |/ }9 Z% e* r2 S6 B
" }% r h8 U. R0 a' J) x; g {* H
}
* N( B7 M+ e$ x, S) c. x7 ]
1 y" ^+ S; R8 Z/ |. r if(continuous[id] == true)- S6 r- g6 q3 M. C2 d* ~$ x
" q, e5 M: |" |; x( ^. {) o
{- h2 i4 O5 m3 S& p
' L) O: n0 G: @; W x1 b( o
document.getElementById(id).style.color = newColour[id]; & o# q" u' J I7 G- w8 |7 [, I
- O: H' W- K5 p! N5 @5 l }. Q# s" F# ~, x: h4 U4 z& \! R% }
& {: E5 S2 L; G9 }: q9 P& E9 h' z
else& Z7 y/ v3 Y5 s2 V
* E( s" H6 J8 [1 D" L4 Z {8 Y0 a( g6 \0 O# E) m3 |. b
Z m, |. f0 y( @& L o! x5 O& Z. S# A document.getElementById(id).style.color = hoverColour;$ G! P1 o7 P$ a; U0 F/ c5 U( `+ s
* [! a3 O% L2 u) ~' t
}
6 ]7 x& p3 s5 N; t- y5 \$ B, r/ z
clearTimeout(tID[id]);
& M# N# G, }1 X. G7 o: x3 a* `& J# U/ `1 A
tID[id]=setTimeout('startFade(' + id + ')', rate);+ f" M$ Y! O' H, w
, ]; u; m2 Q: q" }- E}! A% V1 \" d7 p
+ [) L( }, n; ^* c$ {7 m0 Y* b$ L
function continueFade(id)/ Q9 O9 R, T3 P
" i2 B7 m' s& o' t/ r$ y) `, _{6 Z& \! N$ h9 @. R) e+ |
1 s& H& S5 {9 y( o! P- u1 R9 C
continuous[id] = true;. ~$ G. Q9 I Z& ~3 ]8 c* |
# A8 X; m. Q7 N+ e3 d
}
7 A% G$ O$ M( a6 E+ I
! u4 L- P5 ~- Q5 Z) U9 x. Jfunction stopFade(id)* n- D5 j Z b5 m7 A
' G1 o' n/ M; q+ Z7 |9 p/ i
{& _7 ^" K! w% x; E; l/ p) I
) p: G- y1 j$ Q" A' P, \( e
continuous[id] = false;
2 N0 h7 e7 b1 A+ t
& P: K+ [6 h, B# N}' Q. w$ { m" {
4 S Z/ j) @, s1 k- t' v. n- Hfunction StartTimers()
/ n: Y9 j9 U: W
' O! \ |7 i8 \0 ~7 N6 q+ a{ //set up an initial set of timers to start the shimmering effect3 G) _$ l7 V# C- @$ c% N
+ e2 b8 v7 Z5 P! \6 e: ?6 f3 t" p
for(id=0; id<numLinks; id++)
0 K T* A: `6 {* Y) U! ~+ N
3 s: p% N) W3 L3 B+ z! @0 [1 @4 P {8 j- U7 V* Q- c. R
5 B8 c+ `( t: H" a4 m ~# O7 ~! } t=setTimeout('startFade(' + id + ')', id*100);; H3 f, m$ ~4 L+ f
& K# ~: J J6 V2 x$ Z$ e" T3 q
}
$ \. Z3 e! `- s+ d: r
8 t- a# J0 I) f}
8 ~: a3 Z* T$ d0 L6 \
/ I6 I& p6 Z& [1 _: v: ~//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')+ Z8 T3 ?/ Y3 }) i8 c* E
( Z. P1 I& ?0 h+ S1 EinitLinks('#FF0000', 6, '#FFCC77');/ ^. ?7 A$ m5 s0 [# g
! n' N' ~1 a' ?" ?
//-->
8 O! ~' {( Z' L
7 s1 q9 Q) r# i8 h</script>
P! W5 z$ `$ P2 Q<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元' r9 O6 v2 ]9 U8 t5 w" b. d
</a>/ |8 ^! y% {% G, ?" }+ s/ Z
<br>
/ Y, Z3 [/ @/ b! s# W8 Q- i2 \<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
+ l5 O5 y5 B0 M$ F+ y<br>
1 J! n9 p! E [<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>9 U$ y6 ~# r9 O- K! k% L, f
<br> 0 _. @, `: A4 u+ {
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>" T% z8 G" _+ e1 a) R# z
<br># f: W4 m' O# @
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>& z4 u8 p- R; m( o8 f7 A3 g1 Y
<br>; ?+ I g6 y. h' v- `
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>
. p9 D: F1 [- f1 G( Z<script language="javascript" type="text/javascript">5 V0 h& X& U( q' l1 l% S
<!--0 I6 R5 t$ k$ f: g8 _
setTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
( B7 @0 i) u' G2 U. @& q% _//-->
7 @$ {7 R$ E9 c5 S) W- s</script> |
|