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

|
网页之文字的循环闪动特效
<script language="javascript" type="text/javascript">
1 C6 z) u! d/ Y/ g<!--
' ~. [6 N! {/ ^3 X// convert a single digit (0 - 16) into hex/ f& Z3 Q# X0 [* {1 z9 x
function enHex(aDigit)
: }7 ^) q n) z. ?8 }, a{% ?4 b5 {& P( n9 K
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
! c# J E1 h9 Y}/ |: `3 U! a E& X0 d
// convert a hex digit into decimal' ?; u' @8 L3 ]' h: r8 d. x$ L
function deHex(aDigit)5 u3 p! C9 w) h; F; O0 k: x Z+ @# S
{
5 c ]$ l% O( S. `* I return("0123456789ABCDEF".indexOf(aDigit))
) d* o8 V, a6 }4 M/ K$ _}
. J5 H; m0 w( B8 F: D' t9 I; z. n) q! m8 i1 w/ F& ^; m# Y# b
// Convert a 24bit number to hex
# r7 c6 I! |4 i% `3 ~function toHex(n)* _8 ?% n: I, A# }" u+ W0 t( T
{6 k5 h, F$ E# x9 E7 x4 \7 @
return (enHex((0xf00000 & n) >> 20) +
. `( B0 B; C l( r d enHex((0x0f0000 & n) >> 16) +
8 G" P7 Y5 L. A! K) X* f' U) \ enHex((0x00f000 & n) >> 12) +
, H4 ]7 k" C3 c: Y$ t e' I$ O enHex((0x000f00 & n) >> 8) +
) N) K8 j/ C1 W# Z N$ O enHex((0x0000f0 & n) >> 4) +
4 ^0 D# Y- z0 d! U, ] enHex((0x00000f & n) >> 0))1 N$ l+ ?3 ~0 |, ~$ V8 S7 E; x3 T
}' n0 C o! ?4 o/ a% _
// Convert a six character hex to decimal! P8 x) g- J9 h' c! q
function toDecimal(hexNum)
" \6 q0 q9 {# C; c{3 @- @( `* q9 C, C
var tmp = ""+hexNum.toUpperCase()
9 C' @0 d7 g3 ~: V. v7 j2 C4 ~ while (tmp.length < 6) tmp = "0"+tmp4 L* T9 L0 `1 z: }0 ?5 @3 ]
return ((deHex(tmp.substring(0,1)) << 20) +5 U# _1 t9 _+ Y9 R9 P; n) H
(deHex(tmp.substring(1,2)) << 16) +
3 m: ~9 A' a4 a' A$ |5 U& \ (deHex(tmp.substring(2,3)) << 12) +* I0 ]5 h5 b: |* ~+ ~* P, u
(deHex(tmp.substring(3,4)) << 8) +% l* j9 ^5 V4 I e& U
(deHex(tmp.substring(4,5)) << 4) +
: V+ N; `. l: Y; A (deHex(tmp.substring(5,6))))4 `. L; y& f5 w
}
' f/ J) h7 M/ @8 t///////////////////Shimmering Links/////////////////////( l2 D- w* w- j1 @- N. z/ @2 s
//global variables9 D: _9 S. u* m: V" G
var hoverColour
3 t# z- r; B$ o# Fvar numLinks; B# }! P' o+ c# |6 J3 m
var rate;
1 n: M# ] S- ^0 S3 A) \6 i. Uvar numFadeLevels;. y0 w% u0 U( M/ i9 e2 |. l K
var bgR;" L$ G2 ?/ v4 ^ `" E( j) L
var bgG;
( w. c' \: H4 ^var bgB;
2 {$ g2 Q+ W$ b, O5 t Xvar currR;: C7 y/ A$ {, v- h2 ~
var currG;3 v, b: {* I; o1 N: h% g0 `. L8 }7 X
var currB;# R6 ^; z! W" J f
var count;
, u+ [, w# H6 q# U3 u- l) Evar fadeOut;6 U; s5 @8 \7 X8 i1 h0 i
var continuous;/ I/ g/ L/ U$ j! J2 t- y4 B0 C
var newColour;1 I2 z2 A( T: \$ G% `
var tID;
' v. i" a4 E; _$ Q: vvar redInterval;: w/ p8 W2 j6 J0 v( c
var greenInterval;
6 C; e1 J# H( K: {var blueInterval; O& w- }' q7 B, y) o: r* R
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
& m/ N/ V1 X! c4 U{
5 I+ r- u" F% ~6 b- Q hoverColour = mouseOverColour;
6 r9 y# s8 @( k4 q numLinks = numberOfLinks;6 h1 H# f0 c. a; K
rate = 1;
! Q: e0 P$ H. V$ H) v. | numFadeLevels = 30;
. [7 x8 j+ }0 V) N5 s5 S. l* b: | function initArray(theArray, length, val)* y/ r1 P% P, `8 _! Z3 ~
{
! ]) S$ N+ W L for(i=0;i<length;i++)
8 P0 m6 G' F: o( z3 W! F" t {
' I. S+ D" F2 j6 `3 i; v# E theArray = val;
: Q0 O( S5 r& p$ U! p }; ]+ V( E" |/ c/ o( g
}
! M" D; u& [0 L3 |& J bgR = '0000' + fadeOutColour.substring(1,3)
- v, ]4 A, m- a, {* p% @4 A' } bgG = '0000' + fadeOutColour.substring(3,5)
$ w5 Y+ b' A$ b) u bgB = '0000' + fadeOutColour.substring(5,7)
3 E$ h4 D1 ]/ p4 W- c1 k currR = new Array(numLinks);, i/ S) Q" W+ v+ S y
currG = new Array(numLinks);/ C. f) J2 q6 _1 L0 E
currB = new Array(numLinks);
& t$ j* t3 `' ?3 u3 v# H5 [ count = new Array(numLinks);
: ?( U l( Y2 g+ q. c! Q. L fadeOut = new Array(numLinks);+ r% z* k" `/ i5 k" V
continuous = new Array(numLinks);
* p7 H$ Y y/ z9 `9 f5 ]9 o. | newColour = new Array(numLinks);
" X3 I- n8 l2 t2 J. [. W2 {! @ tID = new Array(numLinks);4 e8 L. A/ G& F( B8 B
redInterval = toDecimal(bgR) / numFadeLevels;. D( L3 f6 P$ N D5 J" R
greenInterval = toDecimal(bgG) / numFadeLevels;4 F5 Y% Y3 `. H# W1 b) S& Z/ U
blueInterval = toDecimal(bgB) / numFadeLevels;
0 H# R! s( B+ F8 T: K: N initArray(currR,numLinks,0);
# X- V# Z# I$ i( _; j- y initArray(currG,numLinks,0);
/ D) [3 L! X% q$ f. H. n# Q9 | initArray(currB,numLinks,0);
$ d1 h, v: Y& K$ r D; e# E2 A: W; [ initArray(count,numLinks,0);6 ?0 [9 h7 Y- I3 t1 F
initArray(fadeOut,numLinks,true);) v1 e! L9 ?- P$ [' |: P! z* Q" O) c+ w
initArray(continuous,numLinks,true);
; S- n1 I/ W( \) G; |} 3 k; \0 l! i: d" B8 G1 @" q
function startFade(id)/ Z! g# _8 e% H
{
/ O" y$ {. f% Z! a: e if(fadeOut[id] == true)
: l- f- {4 a7 z5 H% ?+ Y { /*move colour towards background colour (increment)*/
; X, @' w4 g8 X- s. f currR[id] += redInterval;5 c$ ` a$ Q% ?/ x
currG[id] += greenInterval;+ _/ [$ K, H" H& @
currB[id] += blueInterval;
; ~8 M( u8 x0 p. ]6 f; o newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);9 D8 e7 Z0 s4 `" X. ^
if(++count[id] == numFadeLevels)" g8 n/ {; Y9 G% g, _# l0 e, _! f
{) o0 M5 Q+ v/ G2 a# @3 j
fadeOut[id] = false;
' F3 d9 e- E& n( k9 X1 H }2 D1 A' ?* d, o: ?7 O# M/ k6 g( h4 g
}
# z# u, c( u' e' e5 {- M! \ else
! R1 _2 q6 k6 o {) R2 w S3 M5 x+ E
currR[id] -= redInterval;
1 H/ r( h' W; i4 v9 C3 T+ e" u4 `$ _- j2 Y. n; g& [
currG[id] -= greenInterval;" Z) `; Z( `8 l) m# t6 v; e
_) w2 I" N! ^ currB[id] -= blueInterval;: q% Z/ v6 U6 V3 S6 r
2 s; _, Q- N0 K7 y( \) F; w
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
& V. |+ q- k" W# L q9 k
# ^9 C4 h0 U0 B t if(--count[id] == 0)# |- [7 o( {, n- P
& [/ J, @6 X7 [# M2 G1 v8 o {$ j5 {4 q- l* h" W& J* u s
3 }3 N" f* \' x1 z! V0 V, b
fadeOut[id] = true;
+ K, q* o& l- R6 ]$ t* W1 z% Z9 H, Z; z, G A# b
}: L' x% T6 j: h- x: {+ [
{% g7 \" M# k
}* Q7 M: K1 S( w+ ]* U
+ ^. e. Y0 P. P! f; t+ i- A$ E8 Y8 P
if(continuous[id] == true)
0 q$ |8 T) F) c J/ S4 @5 q& b ~: z1 R) n* W6 U# a' I
{2 k: }* x/ u' l: {. C* z
6 d. T5 L" {+ @6 i% Q5 ^, | document.getElementById(id).style.color = newColour[id]; 5 V# Y7 ?1 K2 a+ `3 ~0 O0 J. W
/ D1 _. \' Q; Y! q7 ` Q }, b3 x7 R, z) k$ [5 F
/ I, I6 S; P8 p7 n
else: n9 v5 w/ Y/ N& _& j* B! k
, W ?7 |5 z5 ^ {5 I: M; M" q+ l$ T+ D1 D
! ^: i) k# o0 Q7 \0 S, q6 N1 |
document.getElementById(id).style.color = hoverColour;( O( e1 U( h; B0 g5 o
; x9 j2 H% A( z2 Y7 |! S* ]' N7 H }
; _1 m& |, n7 [2 f- W
7 y/ K6 a1 s/ y7 h( ]: e a clearTimeout(tID[id]);
: Z4 Y4 R0 K6 O4 T; D' f5 n/ A
$ m# N& I* x6 X" M/ {9 S7 d! z! d tID[id]=setTimeout('startFade(' + id + ')', rate);- p* c% j' N& O4 J9 B- A( q
' P' H4 Z- K; C6 W. k" t
}
& D4 x1 h8 ?' p9 h6 Q$ y: E7 T
, Q% i& [- @4 W# pfunction continueFade(id)
+ d/ M- \8 h h0 x& i
% o6 x* ~" @4 R' V{
. K0 S ^6 J# W2 ~. R4 L% K3 K: E1 [) c: d" ~
continuous[id] = true;) {3 L0 y9 l s/ \8 t5 b& {6 ]$ D1 H
+ I: Y7 v/ S2 D
}/ k# \- e, O) w3 s
E- C" b8 x" X" w( V$ Afunction stopFade(id)% t( v7 y" P9 { j
$ L" J; m; v$ ]3 s# B
{
. J6 [) w/ A7 _
6 i, M+ ?3 e5 V2 a: k" z' D! f6 H continuous[id] = false;
( T5 Z8 v6 [! h$ K5 p
- T# u. k/ o3 `& }}
% @) c2 n% P0 B8 K
6 M% M: t) E, ^3 W% ]) u: Vfunction StartTimers()+ r3 r. D" K) ^2 I4 v1 [8 N0 G
W# U. E5 Q" b. x/ }$ i3 n{ //set up an initial set of timers to start the shimmering effect
' v8 s6 d G5 { [0 P2 k5 f# t% B2 h" {9 t3 ]) U% g
for(id=0; id<numLinks; id++)
4 Q) o/ w: z8 I
+ a: h5 [/ o5 N {
# P5 i7 H8 w% q+ n; t$ w; {7 O9 _) f
t=setTimeout('startFade(' + id + ')', id*100);% T$ h! d {& k+ v( ]
* I. R/ [4 J& w+ y E5 b# z% _
}5 Y% H0 m, r, p5 M
( o* Q" }6 o8 {& h" k" O$ H}& P8 g* Y- Q# G! R2 ^! e! _
1 I3 }) O+ j2 k! n( g" [" V
//format = initLinks('mouse-over colour', 'number of links', 'fade-out colour')! g" r9 p; d8 p$ e6 I7 b
- h: s# j" M7 Z/ G. o
initLinks('#FF0000', 6, '#FFCC77');
; t$ e8 a5 P0 Q2 Z, E
K4 e1 E/ u/ o8 l( d# A& n9 e//-->& u( o! o6 k5 X, v6 O
# ` q* t6 f- l, N</script>" [1 l" h S( i) c' l( F) S% H2 _
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://7wind.com/">国际域名:58元
$ f3 `0 X3 d. F& M. ?5 I</a>$ `2 I$ _6 ^' j6 x+ Q1 Z+ v
<br> g9 @9 e4 J0 e8 g0 M* F
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://7wind.net/">国内域名:110元</a>
; b4 b7 a# J: i5 v<br>
4 J" E) K0 m2 S! I/ f; `4 x<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://7wind.net">新一代企业信息系统</a>
2 p* d6 @1 P( U0 R$ o( J<br>
+ G) F7 E+ E- s, m1 j6 z<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://7wind.net">新一代网络商城</a>' f, P+ M2 f, v2 O/ C% g4 F
<br>- e) _' a! \* J3 Q
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://7wind.com/">全新的自助建站方式</a>
! j: J' U9 R7 V# b$ Q1 R) \# ^<br>" T4 \! E) N0 N, s& A
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.webdevelopersjournal.com/">全新的设计理念</a>7 Q" w+ U7 J6 m) U& K
<script language="javascript" type="text/javascript">
3 K5 K: ?& C$ n0 @<!--
( `/ K/ v' s# V) s1 fsetTimeout('StartTimers()', 1000); //initial 1 second delay to allow page to load and ensure smooth shimmering
- V5 ?8 c+ ?) m* w+ K' l' A% ?//-->
- A" U t6 h/ ?# A</script> |
|