网页多风格切换效果，通过js来控制切换调用css样式来实现这个功能，自己做好css样式直接套用即可。
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>常用的页面风格换肤切换效果_武鸣人</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.loading{
position:absolute;
margin:0px auto;
width:100px;
height:50px;
background:url(/img/20240311_www_wuming_ren_37.gif) no-repeat 50% 50%;
}
#www_wuming_ren,#wuming_ren,#div_side_2
{
float:left;
width:330px;
height:450px;
}
#skin
{
margin:10px;
padding:5px;
padding-right:0px;
list-style:none;
border: 1px solid #CCCCCC;
overflow:hidden;
}
#skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(/img/20240311_www_wuming_ren_38.gif);
}
#skin_0{
background-position:0px 0px;
}
#skin_1{
background-position:15px 0px;
}
#skin_2{
background-position:35px 0px;
}
#skin_3{
background-position:55px 0px;
}
#skin_4{
background-position:75px 0px;
}
#skin_5{
background-position:95px 0px;
}
#skin_0.selected{
background-position:0px 15px !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}
.title
{
cursor:pointer;}
h1{
margin:10px;
padding:10px 20px;
width:270px;
color:#ffffff;
font-size:14px;
}
#news_list,#game_list,#other_list{
position:relative;
padding:10px;
width:290px;
height:300px;
}
a:link {
text-decoration: none;
color: #333333;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
<!--以下20240311_www_wuming_ren_1.css是默认样式，请修改为您的默认样式的CSS地址-->
<link href="/img/20240311_www_wuming_ren_1.css" rel="stylesheet" type="text/css" id="cssfile" />
<script language="JavaScript" type="text/javascript">
function $(obj){
return document.getElementById(obj);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var skin={};
skin.addEvent=function(){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
skin.readCookie=function(){
var skin=0
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
skin.setSkin=function(n){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].className="";
}
skin.setCookie(n);
$("skin_"+n).className="selected";
$("cssfile").href="/img/main"+n+".css";/*修改此处为您的CSS地址*/
}
window.onload=function(){
skin.setSkin(skin.readCookie());
skin.addEvent();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="skin">
<li id="skin_0" title="灰色">灰色</li>
<li id="skin_1" title="绿色">绿色</li>
<li id="skin_2" title="黄色">黄色</li>
<li id="skin_3" title="蓝色">蓝色</li>
<li id="skin_4" title="粉色">粉色</li>
<li id="skin_5" title="紫色">紫色</li>
</ul>
<div id="www_wuming_ren">
<div id="news">
<h1 class="title">武鸣人，www wuming.ren</h1>
<div id="news_list"></div>
</div>
</div>
<div id="wuming_ren">
<div id="game">
<h1 class="title">武鸣人，www wuming.ren</h1>
<div id="game_list"></div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处