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

为了保持新鲜感，你可以定义几种方案并随机调用样式表。本文采用JS来不停地改变样式属性，加入如下JS代码：

<script language="javascript"> if (document.getElementById) { var r = Math.floor(Math.random()*241); var g = Math.floor(Math.random()*241); var b = Math.floor(Math.random()*241); var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3; var p1 = .1; var p2 = .15; var p3 = .2; getLighterRGBShades(); var ri = Math.floor(Math.random()*5); var gi = Math.floor(Math.random()*5); var bi = Math.floor(Math.random()*5); } function setStyleByTag(e, p, v) { var elements = document.getElementsByTagName(e); for(var i = 0; i < elements.length; i++) { elements.item(i).style[p] = v; } } function getLighterRGBShades() { rp1=parseInt((r*p1)+(255-(255*p1))); gp1=parseInt((g*p1)+(255-(255*p1))); bp1=parseInt((b*p1)+(255-(255*p1))); rp2=parseInt((r*p2)+(255-(255*p2))); gp2=parseInt((g*p2)+(255-(255*p2))); bp2=parseInt((b*p2)+(255-(255*p2))); rp3=parseInt((r*p3)+(255-(255*p3))); gp3=parseInt((g*p3)+(255-(255*p3))); bp3=parseInt((b*p3)+(255-(255*p3))); } function changeLinkColor() { if (!document.getElementsByTagName) {return false;} // unclean! unclean! if (r>239||r<1) ri=ri*-1; if (g>239||g<1) gi=gi*-1; if (b>239||b<1) bi=bi*-1; r+=ri; g+=gi; b+=bi; setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')'); setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')');  setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid');  getLighterRGBShades(); setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')'); setTimeout('changeLinkColor()',40); } function getLighterRGBShades() { rp1=parseInt((r*p1)+(255-(255*p1))); gp1=parseInt((g*p1)+(255-(255*p1))); bp1=parseInt((b*p1)+(255-(255*p1))); rp2=parseInt((r*p2)+(255-(255*p2))); gp2=parseInt((g*p2)+(255-(255*p2))); bp2=parseInt((b*p2)+(255-(255*p2))); rp3=parseInt((r*p3)+(255-(255*p3))); gp3=parseInt((g*p3)+(255-(255*p3))); bp3=parseInt((b*p3)+(255-(255*p3))); } function init() { changeLinkColor(); }  </script>

<STYLE> .pstyle{ background-color:#fff; padding:5px; margin:5px; font-size:12px; } td{ border:1px solid #FF8040; background-color:#FFEBE1; } a{ color:#FF8040;} </STYLE> <TABLE title=不停变换的页面样式 cellSpacing=3 cellPadding=0 width=250 border=0> <TBODY> <TR> <TD vAlign=top> <P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P> <P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P> <P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P></TD> <TD vAlign=top width=80> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> <P class=pstyle><A href="http://homepage.yesky.com">右侧导航</A> </P></TD></TR> <TR> <TD align=middle colSpan=2> <P class=pstyle><A href="http://homepage.yesky.com">底部导航</A>|<A href="http://homepage.yesky.com">底部导航</A>|<A href="http://homepage.yesky.com">底部导航</A>|<A href="http://homepage.yesky.com">底部导航</A></P></TD></TR></TBODY></TABLE> <script language="javascript"> if (document.getElementById) { var r = Math.floor(Math.random()*241); var g = Math.floor(Math.random()*241); var b = Math.floor(Math.random()*241); var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3; var p1 = .1; var p2 = .15; var p3 = .2; getLighterRGBShades(); var ri = Math.floor(Math.random()*5); var gi = Math.floor(Math.random()*5); var bi = Math.floor(Math.random()*5); } function setStyleByTag(e, p, v) { var elements = document.getElementsByTagName(e); for(var i = 0; i < elements.length; i++) { elements.item(i).style[p] = v; } } function getLighterRGBShades() { rp1=parseInt((r*p1)+(255-(255*p1))); gp1=parseInt((g*p1)+(255-(255*p1))); bp1=parseInt((b*p1)+(255-(255*p1))); rp2=parseInt((r*p2)+(255-(255*p2))); gp2=parseInt((g*p2)+(255-(255*p2))); bp2=parseInt((b*p2)+(255-(255*p2))); rp3=parseInt((r*p3)+(255-(255*p3))); gp3=parseInt((g*p3)+(255-(255*p3))); bp3=parseInt((b*p3)+(255-(255*p3))); } function changeLinkColor() { if (!document.getElementsByTagName) {return false;} // unclean! unclean! if (r>239||r<1) ri=ri*-1; if (g>239||g<1) gi=gi*-1; if (b>239||b<1) bi=bi*-1; r+=ri; g+=gi; b+=bi; setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')'); setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')'); setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid'); getLighterRGBShades(); setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')'); setTimeout('changeLinkColor()',40); } function getLighterRGBShades() { rp1=parseInt((r*p1)+(255-(255*p1))); gp1=parseInt((g*p1)+(255-(255*p1))); bp1=parseInt((b*p1)+(255-(255*p1))); rp2=parseInt((r*p2)+(255-(255*p2))); gp2=parseInt((g*p2)+(255-(255*p2))); bp2=parseInt((b*p2)+(255-(255*p2))); rp3=parseInt((r*p3)+(255-(255*p3))); gp3=parseInt((g*p3)+(255-(255*p3))); bp3=parseInt((b*p3)+(255-(255*p3))); } function init() { changeLinkColor(); } init(); </script>
运行代码复制代码另存代码收藏本页

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

  阅读关于 CSS JS 网页皮肤 网页陶吧 龙犊 的全部文章 热卖推荐： 手机　诺基亚　MP5　电脑包　双卡双待　手机链　U盘　笔记本电脑