查看完整版本: 变脸：CSS+JS让网页浏览者不再审美疲劳

变脸：CSS+JS让网页浏览者不再审美疲劳

变脸：用CSS+JS打造的网页皮肤$Eva\ N

:Bg] s:y/y 每个人都有不同程度的审美疲劳，说俗一点就是喜新厌旧，对于网页，如何把浏览者的审美疲劳拒之门外，使之对网页保持某种意义上的新鲜感，这是一个值得研究的问题。其实，很多大型网站或者个人网站都会不定期地对网页进行改版，这些都可以归纳为一个字，那就是“变”，不停地变换网页的布局与样式，就是为了迎合人们不断变化的口味。
txT!UX*{z
bo7O"NX CSS核心：属性重定义
P1St?]q DSJ7} +u|FQ2I%y
先来看几个小技巧：$y2A$L!@6]u
kWl.fQl7c
1、给链接加上修饰
5i1jXe6L3r(wj C ;T u5B~fL7`
我们通常会用样式表以外的元素对链接进行修饰，比如使用图片、使用表格、使用其他标签，其实我们可以对<a>标签用样式表来定义，为了过程简单，我们直接在<a>中使用style来定义。
k-Y^x!F)t5ngZ "PI4@9y0l&w~8J
A：给链接加上边框
th*Wo/bb+{)u-o
} *Q1Z$ckB(q
为什么要给链接加边框呢，通常情况下我们在导航部分会给链接作些边框修饰，如果用样式表来定义，我们可以这样写：[code]<a style="border:1px solid #ccc;" href="http://homepage.yesky.com/" >带边框的链接</a>[/code]这是效果:sIN-l;M.a&V

B f~S-`-AA6tE
F(Z <a style="border:1px solid #ccc;" href="http://homepage.yesky.com/" >带边框的链接</a>
i(Zgi$tRP 7U(`4?`*_"z%qo
当然，这样的边框并不好看，我们还需要对其设置一下内边距。如下代码：[code]<a style="border:1px solid #ccc;padding:5px;" href="http://www.ezubbs.91.tc/">带边框的链接</a>[/code]这里是效果：*ay5a_Bv
<a style="border:1px solid #ccc;padding:5px;" href="http://www.ezubbs.91.tc/">带边框的链接</a> U9r'slR$k:g;u
<br>)?d'x+H$d@P `a.U
B：给链接加上背景颜色/vJhon/l
6w t4wCV5iRys
其实这个效果也并没有达到美观的效果，我们可以为其添加背景颜色，代码如下：[code]<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.ezubbs.91.tc/">带边框的链接</a>[/code]这里是效果：.Yf$gV-Ve0ASu8^
<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.ezubbs.91.tc//">带边框的链接</a>O@Y5g0CBR
XGT7I`N)gS5X+rr
<br>
t)`W7E)n
这样的边框和背景色也许不是您想要的，您可以自己修改颜色参数。

C：给链接加上文字修饰
.L j0@jOn.p
]$pX3w B4K/a 通常情况下我们可以在<a>标签中使用<b>标签或<strong>标签来加粗文字链接，实际上这都是多余的，我们只要在<a>标签中这样定义：[code]<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;font-weight:bold;" href="http://ezubbs.91.tc/">带边框的链接</a> [/code]这里是效果："l2o0k`5_\L)R.~
X0ce8iDS
<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;font-weight:bold;" href="http://ezubbs.91.tc/">带边框的链接</a>

2、重定义原始标签的属性j_zDn

R&P9mn?n.z)s 什么叫重定义原始标签的属性？举个简单的例子：<b>标签的作用在于把文字显示为粗体，这是浏览器对<b>标签的默认属性的解释。但我们可以通过样式表对其进行改写，如下代码：[code]<b style="font-weight:100;">被重定义属性的<b>标签</b> [/code]这里是效果：j6@j4[p
^Kfd2R j
<b style="font-weight:100;">被重定义属性的<b>标签</b>
,{U~T*q 5q;k X,_%Q)A0er

gD9t|%s0TX 大家会看到上面的这几个字“被重定义属性的<b>标签”显示为正常文字，而非粗体，这是因为<b>的font-weight属性被重新定义了，所以在显示的时候会优先解析CSS对其的定义。 ~
m~e0H:d i
p!j.HH^~VV3F"^
当然，我们同样可以对<b>标签加诸如边框、背景色、上划线下划线之类的修饰，见以下代码：[code]<b style="border:1px solid #FF6600;background-color:#FFEFE8; padding:5px; text-decoration:underline;">被修饰的<b>标签</b> [/code]这里是效果：0pL [
BM)Hy)I

/eAyc(`:E a <b style="border:1px solid #FF6600;background-color:#FFEFE8; padding:5px; text-decoration:underline;">被修饰的<b>标签</b> </b>
y5Mi(gR
~z4G)W <br>
w1znP ~:ug 综上所述，html中几乎所有尖角符号内的标签都可以用来样式重新定义，进而改变这些标签的默认属性。J*Y ^ Ya]@El
1{lC9uU0m
简洁美：用表格和段落进行网页布局设计
wv:sap0}-ud
v5ssvvI!b 通常，菜鸟们会采用表格和段落来进行网页布局设计，实际上这称不上网页布局设计，只不过是一些简单的排版罢了；然而真正的高手他们可以仅使用表格和段落设计出美观的网页来，而且绝对符合W3C标准，在大多数情况下满足了各种浏览器对代码的解析。
;J _c9{7x,k,J^p 4E.C!t4gA)QPc
首先你要明白为何要使用表格和段落进行网页设计，它们之间的搭配有何优势？I F*r*gZ#t.GN
"DneWFT
其实，使用表格和段落来进行网页设计的优势非常明显，首先，表格作为一种布局元素在网页中使用得非常多，设计者能够随心所欲地利用表格来划分网页各个部分的功能。但必须一提的是，表格虽然好用但不能滥用，滥用表格会使页面显得臃肿不堪，网页废代码增多不仅浪费大量带宽，降低网页下载速度，影响用户体验，同时也违反了搜索引擎所支持的网页简单化要求，一个优秀的网页设计师必须考虑这两个因素。其次，段落在网页排版中也大量使用，一个回车键就是一个段落，而且代码非常简洁，使用起来非常方便。最后一个优势在于使用CSS重定义表格属性和段落属性，使之获得完美的视觉效果并达到简单就是美的最高境界。 BUv/z
w#eSX
OhbQ?-vt E[
正因为表格和段落在网页布局设计中各自的优势，我们可以充分利用两者的功用，让表格完成整体布局，而让段落在细节上给排版给予更大的支持，这是这对“黄金组合”最大的优势所在。

变脸：灵活运用标签的可定义样式 既然要设计出美观的网页，那么就要很好地应用颜色技巧、边框技巧等，一种比较好的设计方法是
8b/PnIiv2iwE <P>和<TD>采用相同的颜色，'LZ RY"QW*q*t
<P>的背景色为白色而表格的背景色采用比?1g0R'}$UK M:{(s
<P>以及<TD>的边框颜色浅的同类色彩，见以下实例：
j!b_s;A Q-R0R)KL <SCRIPT> F?&F(BCA0a]
function Preview(obj)
3yEb
]&vv`i {
,Kha|%]   var TestWin=open('');
6rvw*z$Q%g9\zGV8j   TestWin.document.write(obj.value); *rB#W;M+H
gd!E:G F w6^
} +bU0a1e9y)^
function copyCode(obj) {
+OzYj5[{ Nv@     var rng = document.body.createTextRange(); @KA0h-{ojhEo:O
    rng.moveToElementText(obj);
O"G7I/h|@A     rng.scrollIntoView();
%N$?1L:M%h0F     rng.select();
(\G/xT7S2S9v[w w*m     rng.execCommand("Copy");
1R-Rcxt4S)u u j     rng.collapse(false);
!V9OA[4} }
Q4S Sg/O3U function saveCode(obj) { Mk;UM|
    var winname = window.open('', '_blank', 'top=10000'); q aT)a O E4rip;g
    winname.document.open('text/html', 'replace');
9Ow"i3{;I[     winname.document.writeln(obj.value); V\3w^["U `
    winname.document.execCommand('saveas','','homepage.yesky.com.htm'); 8C(^;h9itA*e6Q
    winname.close();
:]y*m&U qh }
.~!A?-CtQ;GD function addBookmark(title,url) { &`yw H/x4B
if (window.sidebar) {  
\"c$XsQ4r8ayA)L window.sidebar.addPanel(title, url,"");  *a0~`-^CD
|
} else if( document.all ) { 4` gk1E0G*@%mi
window.external.AddFavorite(url,title); pcM-B}
rHxO#qpB2m
} else if( window.opera && window.print ) {
-AgbO!x6\]u$G s return true;
5_'M+F-F@C }
-u`;l4Or'H"o$r }
3H`,q:SZ;dp2D6j </SCRIPT>
hCu W+?4y </P>
t3s/D0}%g]S.p <P align=center><TEXTAREA id=code style="WIDTH: 500px; HEIGHT: 200px">&lt;STYLE&gt; (H cPAk-P/g7z:c
.pstyle{
&vn}5^? Qn background-color:#fff;
a*p7X1Up(a padding:5px; }3x1pFN,@aVs
margin:5px; e;o@ LD/v6qF `
font-size:12px; J&~]Q#H VvP5@[,^
}
0~K|RR V td{ 1LL&{
Sv!H
border:1px solid #FF8040; !UJ-LP?"GxJ r4wr
background-color:#FFEBE1;
/UQ!v2_:D#mr }
yL|VN.p^o2` N%w a{
f"Y6|]'y4k7V color:#FF8040;}
8i;c5nS3R &lt;/STYLE&gt;
8?DdG2jVkRW:H B%?nu8u?"kxoZ8}
&lt;TABLE title=不停变换的页面样式 cellSpacing=3 cellPadding=0 width=250 border=0&gt;
/BM9lL7JX'm &lt;TBODY&gt;
(l@7V0[ |%E &lt;TR&gt;U-oOY:cV
&lt;TD vAlign=top&gt;
\vv2q`{o5n &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;
BP7s3Z[9k &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;S7k-[-MT2F){ wZN;m:NW
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;&lt;/TD&gt;
*voQ4nuU:p:L@ &lt;TD vAlign=top width=80&gt;6blP/h8aZ
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
YAl,k2R5k'p6_-R &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; cpx
`D6W+]S;Lao
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
["m6sU+mkI &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; kH.o2R4WyYq
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
`"sb9MV1eO!Y:U$w6Z%s &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
hDZ'koC0YA A?.o &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; &lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;Kq;iAW}S-zj.T
&lt;TR&gt;
a:W:O]g7f(PiA &lt;TD align=middle colSpan=2&gt;?%RhP\|
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;&lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
?;H KQ'M:q r} </TEXTAREA> <BR><BUTTON onclick=Preview(code)>运行代码</BUTTON><BUTTON onclick=copyCode(code)>复制代码</BUTTON><BUTTON onclick=saveCode(code)>另存代码</BUTTON><BUTTON onclick=addBookmark(document.title,location.href)>收藏本页</BUTTON> </P>"Y COf5G
<P>&nbsp;</P>
)HO}+Cwh}7rm <P>我们只需要定义其中的p、td以及a的样式属性为：</P>K?;R#B`6KH^A Ln
<P>&nbsp;</P>;Qqy9\%uX+o'J
<P>[code]&lt;style&gt; .pstyle{ background-color:#fff; padding:5px; margin:5px; font-size:12px; } td{ border:1px solid #FF8040; background-color:#FFEBE1; } a{ color:#FF8040;} &lt;/style&gt;[/code]</P>

为了保持新鲜感，你可以定义几种方案并随机调用样式表。本文采用JS来不停地改变样式属性，加入如下JS代码：[code]<script language="javascript"> 0Tb(v+EZU/Mj-p:Y yI
if (document.getElementById) {
4Z\/NMW5n0@fT6N6S6Y var r = Math.floor(Math.random()*241);
/W^gP[md*A var g = Math.floor(Math.random()*241);
ouPmq&o2]BL var b = Math.floor(Math.random()*241); ~O Q+N+S:I}1]x
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3;
7T7v E-Y#}y,A var p1 = .1;
m,Y1x5C{l9Q*Ws){ var p2 = .15;
Hb9w1Yh;ai/_ var p3 = .2;
FM/l!w&x!d/?a
` getLighterRGBShades(); _Es#x k
var ri = Math.floor(Math.random()*5); y6P/z @5b_Er
var gi = Math.floor(Math.random()*5); "r?6l)S4zv(lQ
var bi = Math.floor(Math.random()*5);
vw)du6n B }
2h3q*jEn4Y&TQUB function setStyleByTag(e, p, v) {
}%o r$iG var elements = document.getElementsByTagName(e);
Z6gEdG for(var i = 0; i < elements.length; i++) {
pCRS2s elements.item(i).style[p] = v;
(t P~Zwv,HQG9E5N }
g/Ntl(Km [5lj } 9KP5iL9Tm
(ru,FG
p.@
function getLighterRGBShades() { R |ohl,[
rp1=parseInt((r*p1)+(255-(255*p1)));
m/a:F1yL3p Un_p~ gp1=parseInt((g*p1)+(255-(255*p1)));
9||J0g!J*BBm8z bp1=parseInt((b*p1)+(255-(255*p1))); %}I;F8jjw9P
rp2=parseInt((r*p2)+(255-(255*p2))); bwN&^XhE)@2K
gp2=parseInt((g*p2)+(255-(255*p2))); *l4yW)bB
bp2=parseInt((b*p2)+(255-(255*p2)));
4OS9D*qM[ K2SS P rp3=parseInt((r*p3)+(255-(255*p3))); V fX$q(] q)?
A'n!D
gp3=parseInt((g*p3)+(255-(255*p3)));
0U2U ?)qBcS bp3=parseInt((b*p3)+(255-(255*p3)));
jBK|8J }
mIBX2j9ETI
`;a2~u3~ fp function changeLinkColor() {
&~H,NW{6l if (!document.getElementsByTagName) {return false;} // unclean! unclean!
$_!];J,}-E5e0JX)o if (r>239||r<1) ri=ri*-1;
t4M8pC_q!A]|q if (g>239||g<1) gi=gi*-1;
4D_} z9`&f if (b>239||b<1) bi=bi*-1; -_2RES1O WAl/Uk
r+=ri; +STnOU-w
g+=gi; ,I6UM%U a"}1qe
b+=bi; 2QfYwz6m
setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')'); 8v
xu(mInwO)LLD0`
setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')');  "sEi{'zK_
setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid');  
C%ww:`
@NI ?X&y getLighterRGBShades();
{W7n-hG] h setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')');
+pC7Ri5S$rr i_ setTimeout('changeLinkColor()',40);
7t x)ocTu&| } m6[&aYe_!Ld
z9J ][;WNC CC8J7^
function getLighterRGBShades() {
H3b-Wu IN!K*J rp1=parseInt((r*p1)+(255-(255*p1)));
X9p7r%U5w} gp1=parseInt((g*p1)+(255-(255*p1)));
M'Yy5pcg&T3z9B!D bp1=parseInt((b*p1)+(255-(255*p1))); (wH~6q"Oi
rp2=parseInt((r*p2)+(255-(255*p2))); Ag%G)Y]
gp2=parseInt((g*p2)+(255-(255*p2))); ;j~^8q+f X.w
bp2=parseInt((b*p2)+(255-(255*p2))); )}m)q_/NzW]ce7lO
rp3=parseInt((r*p3)+(255-(255*p3))); -z9oxo!bBu
gp3=parseInt((g*p3)+(255-(255*p3))); 7I'G!e$lK(Mx;r
bp3=parseInt((b*p3)+(255-(255*p3)));
C| AS)Z7Q^ ] }
/cP ^h&v0m2l9{
p2\`
pZ`o#VD function init() { dJAB\4J8lg
changeLinkColor();
&X?PTzd1q A }  
^:X je4t k,ZB </script>[/code]

</SCRIPT><TEXTAREA id=code2 style="WIDTH: 500px; HEIGHT: 200px">&lt;STYLE&gt;
2ia6h1z9ks .pstyle{
XQ]"SqT} background-color:#fff;
Ba.w} Lb padding:5px;
#et+@.wx*h A,E&u,?t margin:5px;
v7V:~$EV%b0x!p1Oq font-size:12px; K? oa6mn6nC
y[
} mdN"gJl
td{ }upE7s;a yd:O4M
border:1px solid #FF8040;
3S?k!~xu#ZA background-color:#FFEBE1; E U$L4^:PV8D
}
9G(`znR"W^j a{
qL8U q"}0s color:#FF8040;} W5NV*sqv
&lt;/STYLE&gt;
.`{%z&voI"{,oo X]p(K6~3sWB
&lt;TABLE title=不停变换的页面样式 cellSpacing=3 cellPadding=0 width=250 border=0&gt;As4p[kS Z4^E:H
&lt;TBODY&gt;0Z6LH,y;r
h'[~$C$p
&lt;TR&gt;
5JPzB9X-E &lt;TD vAlign=top&gt;
+v/CT(o.J &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;
4k'V:VF5?e_ b &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;2S:W$|C k@Y
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等&lt;/P&gt;&lt;/TD&gt;^T^3@HBTn;h1f
&lt;TD vAlign=top width=80&gt;.nl{!Ck'A&[ |
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
#m hGsa"] &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
%BE"`&qHa{ &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; g|K Om]#K4e8J
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
0l\N/}S)Ap%w#Y &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt;
,q2o_"J#G!~u-G;u-l l &lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; 'k)bp`-u.P-I5n
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;右侧导航&lt;/A&gt; &lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;
j L0t5z*['lL &lt;TR&gt;
8u7Rz4v cM8_(V &lt;TD align=middle colSpan=2&gt; r"kaz{Y3t
&lt;&lt;img src="./images/smilies/default/titter.gif" border="0" smilieid="9" alt=";P" /&gt; class=pstyle&gt;&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;|&lt;A href="http://homepage.yesky.com"&gt;底部导航&lt;/A&gt;&lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
N C"nq]'hGf m &lt;script language="javascript"&gt;
!f1p6c[)[Bq_ if (document.getElementById) { h(p.VJy_d(`
var r = Math.floor(Math.random()*241);
j\G;G9o)w4w7k var g = Math.floor(Math.random()*241);
@nb:k6aA
\#h var b = Math.floor(Math.random()*241);
v4a2o,_ |W(l&M1^4pPx var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3; ilN8bs+|:_
var p1 = .1;
)PO/d0ak_P;\`j var p2 = .15; ,Q*neR8A k_+]
var p3 = .2;
{h3OLt[ getLighterRGBShades();
3K!C/~8ie var ri = Math.floor(Math.random()*5); %ME2p%H+im/JK
var gi = Math.floor(Math.random()*5);
3j1AJ;ePO var bi = Math.floor(Math.random()*5); ,CT3`BB.sA
}
4G1QU/EDz'z+o function setStyleByTag(e, p, v) { .^P3OZ8A&~ uy
var elements = document.getElementsByTagName(e); @y"Y1RN"JY+t
for(var i = 0; i &lt; elements.length; i++) {
7Tj1Rt!_-_H elements.item(i).style[p] = v; 4e-m }XrUa(z
} hhm!C
GBv2}pY
} %F9D8H'E+}Z0Pm/[
_:r3S`\0gt#h
function getLighterRGBShades() { 0H"D0P:[j8\~
rp1=parseInt((r*p1)+(255-(255*p1))); Z.F!XV+Q
gp1=parseInt((g*p1)+(255-(255*p1))); OZ1C9aV
bp1=parseInt((b*p1)+(255-(255*p1)));
m zj Cau rp2=parseInt((r*p2)+(255-(255*p2))); U5P`Rmj%jz
gp2=parseInt((g*p2)+(255-(255*p2))); e)S!af;bU
bp2=parseInt((b*p2)+(255-(255*p2))); d*qk[T1EN5QE
rp3=parseInt((r*p3)+(255-(255*p3)));
^{"l\c*mR4Sa/yN
gp3=parseInt((g*p3)+(255-(255*p3)));
o$u?uQ
? bp3=parseInt((b*p3)+(255-(255*p3))); j iNLqji
} x0Wp:_o

'Lz
a XV4s._ function changeLinkColor() {
S8O[)|:\^5| if (!document.getElementsByTagName) {return false;} // unclean! unclean!
O2O.vKRv1e if (r&gt;239||r&lt;1) ri=ri*-1;
OCK*D'V
if (g&gt;239||g&lt;1) gi=gi*-1;
0|b'Z`9IBI5O-d if (b&gt;239||b&lt;1) bi=bi*-1;
DF,Cj2X _m+kT r+=ri; +L+BG?U/}
g+=gi;
Uh0l1inM@ b+=bi;
gYx!kg-[NzP setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')');
Aq2Kg/IR%H
Q setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')');  b {6C:v%y
setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid');  C;V;lZz~!mG
getLighterRGBShades(); x3c}w3?;E)B
setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')'); dt#~ {1vi;F)q
setTimeout('changeLinkColor()',40); m@9nb q
} \8Bz R{!L@(E
0D!v#OIRtgH
function getLighterRGBShades() {
3d]8pQf4wV rp1=parseInt((r*p1)+(255-(255*p1))); ({ew?"ftm*P
gp1=parseInt((g*p1)+(255-(255*p1))); \ Nq'{*Bh{
bp1=parseInt((b*p1)+(255-(255*p1))); By/fe9Uq8u7`
rp2=parseInt((r*p2)+(255-(255*p2))); )Q'mU_%~
gp2=parseInt((g*p2)+(255-(255*p2))); "h
Xn"M~N([
bp2=parseInt((b*p2)+(255-(255*p2))); (u c`T0RLWM!j5M9|
rp3=parseInt((r*p3)+(255-(255*p3)));
(C(G:X7aH"f#Yp;m gp3=parseInt((g*p3)+(255-(255*p3)));
aU4F!F0~
B/zGTb bp3=parseInt((b*p3)+(255-(255*p3)));
s4n5NdV,dl }
wL;AWT0{K!RfN
&L{@(c*h
V
lH`'h.mb;w function init() {
g2A'eAH!L changeLinkColor();
8B~^n%J2B'WD
n }  
8{S/oq'iduJi init();
v t a[k8pn7gX &lt;/script&gt;</TEXTAREA> <BR><BUTTON onclick=Preview(code2)>运行代码</BUTTON><BUTTON onclick=copyCode(code2)>复制代码</BUTTON><BUTTON onclick=saveCode(code2)>另存代码</BUTTON><BUTTON onclick=addBookmark(document.title,location.href)>收藏本页</BUTTON>

这段代码中的语句setTimeout('changeLinkColor()',40)，其中的40是指变脸间隔时间，当然，你可以任意改变其大小。这段代码并不复杂，读者可以自行研究。