以下是 利用JS实现网页换皮肤效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为利用JS实现网页换皮肤效果，属于站长常用代码" />
<title>利用JS实现网页换皮肤效果</title>
<link href="style/style.css" type="text/css" rel="stylesheet" media="screen" />
<script>
var cssPath = "style/style_switch";
var styleID=1;
document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');
var cssLink=document.getElementById("cssLink");
function styleChange(n) {
if(n==5){
document.getElementById("select").style.background="#7b0003";
}
else{
document.getElementById("select").style.background="#e8e8e8";
}
cssLink.href = cssPath+n+".css";
}
</script>
</head>
<body >
<div id="select" class="select">
<a href="javascript:styleChange(1);" class="zi"></a>
<a href="javascript:styleChange(2);" class="lv"></a>
<a href="javascript:styleChange(3);" class="lan"></a>
<a href="javascript:styleChange(4);" class="f60"></a>
<a href="javascript:styleChange(5);" class="f50"></a>
<p>请挑选我的颜色：</p>
<div class="clear"></div>
</div>
<div id="text">首先、AJAX是一种很酷的技术，一旦采用了AJAX，就能让你的Web页面，你的网站，甚至连同你们公司，都变得很酷。在Web2.0的时代里，不使用一点 AJAX技术的网站，就会显得很老土，很落伍。但是，这样的理解，其实是很肤浅的。仅仅是从一个外行，从一个使用者的角度出发，来理解AJAX，就像我在本书的第一章AJAX我也行中那样，开发出很愚蠢，甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 AJAX更酷的一点在于，对于传统的Web开发人员来说，AJAX所运用的，是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系。遵循这样的体系开发Web应用，能让你的开发过程变得更加轻松，也能使你们的开发团队，显得很酷。在Web2.0 的时代里，还在采用过时的技术来开发 Web，会显得很老土，很落伍。 AJAX的相关组成技术，每一个都已经出现了N年以上了，对这些技术的组合运用，也远远早于AJAX这个名词出现之前。所以，我真正敬佩的，并非提出
AJAX这个缩写的Jesse James Garrett。而是那些早在N年以前，就已经在探索、实践的先行者，他们始终在追求的：是更好的用户体验，以及更好的开发体验。这样的精神，才是最可宝贵的，也是最值得我们学习的。许多年过去以后，当我们再回头来看当年的这些热门技术，也许早已经变得老土，变得落伍了。在这样的历程中，哪些人会成长为高手？会成长为大师呢？就是那些永不满足，永远在追求更好的用户体验，永远在追求更好的开发体验的人！
</div>
<p align="center">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。<br />
</p>
<p align="center"><br />
</p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><p>原理：利用JS调用不同CSS，来实现网页风格的变化。</p>
<!--Content End--></div></td>
</tr>
</table>
<p align="center"> </p>
<p align="center"></p>
</body>
</html>CSS代码(style.css):
*{margin:0px;padding:0px;font:12px/2 "Courier New",Courier,monospace;color:#CC2A50;}
.clear{clear:both;}
#select{text-align:right;margin-left:5px 30px;border:1px solid #666261;background:#e8e8e8;}
#select p{float:right;line-height:36px;color:#3a8ecf;}
#select a{display:inline;width:12px;height:12px;border:1px solid #666;float:right;margin:10px 10px;}
#select a.zi{background:#CC2A50;}
#select a.lv{background:#0093bb;}
#select a.lan{background:#003278;}
#select a.f60{background:#f60;}
#select a.f50{background:#fff500;}
分享到QQ
分享到微博
微信扫一扫
