<!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" />
<title>css+javascript实时切换风格皮肤，并存入cookie</title>
<style type="text/css">
.themes{border:1px solid #000;}
</style>
<script language="javascript" type="text/javascript">
<!--
var arrCSS=[
["<img src='ocean.gif' width='16' height='8' class='themes' alt='Ocean'>","ocean.css"],
["<img src='tangerine.gif' width='16' height='8' class='themes' alt='Tangerine'>","tangerine.css"],
["<img src='violet.gif' width='16' height='8' class='themes' alt='Violet'>","violet.css"],
["<img src='oyster.gif' width='16' height='8' class='themes' alt='Oyster'>","oyster.css"],
["<img src='grass.gif' width='16' height='8' class='themes' alt='Grass'>","grass.css"],
""
];
// *** function to replace href="#" ***
function v(){
return;
}
//下载自：http://www.codefans.net
// *** Cookies ***
function writeCookie(name, value) {
exp = new Date();
exp.setTime(exp.getTime() + (86400 * 1000 * 30));
document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString() + "; path=/";
}
function readCookie(name) {
var search;
search = name + "=";
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(offset, end));
}else{
return "";
}
}
////////////////////////////////////
// StyleSheet
////////////////////////////////////
function writeCSS(){
for(var i=0;i<arrCSS.length;i++){
document.write('<link title="css'+i+'" href="'+arrCSS[i][1]+'" rel="stylesheet" disabled="true" type="text/css" />');
}
setStyleSheet(readCookie("stylesheet"));
}
function writeCSSLinks(){
for(var i=0;i<arrCSS.length-1;i++){
if(i>0) document.write(' ');
document.write('<a href="javascript:v()" onclick="setStyleSheet(\'css'+i+'\')">'+arrCSS[i][0]+'</a>');
}
}
function setStyleSheet(strCSS){
var objs=document.getElementsByTagName("link");
var intFound=0;
for(var i=0;i<objs.length;i++){
if(objs[i].type.indexOf("css")>-1&&objs[i].title){
objs[i].disabled = true;
if(objs[i].title==strCSS) intFound=i;
}
}
objs[intFound].disabled = false;
writeCookie("stylesheet",objs[intFound].title);
}
writeCSS();
setStyleSheet(readCookie("stylesheet"));
// 隐藏显示换肤框
function ShowHideDiv(init) {
if(document.getElementById("Sright").style.display == "block"){
document.getElementById("Sright").style.display = "none";
}
else{
document.getElementById("Sright").style.display = "block";
}
}
//-->
</script>
</head>
<body>
<div class="topNav">
<h1>css多风格、皮肤切换演示</h1>
</div>
<div class="blank4"></div>
<div class="skin">
<div id="page_options" onclick="ShowHideDiv()">
皮肤设置选项
<div id="Sright">
颜色：<script type="text/javascript">writeCSSLinks();</script>
</div>
</div>
</div>
<div class="blank4"></div>
<div class="NewsBody">
<div class="CoLeft">
<div class="clear"></div>
</div>
<div class="CoCenter">
<div class="CConter"></div>
<div class="clear"></div>
</div>
<div class="CoRight">
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="blank4"></div>
<div class="footer"></div>
</body>
</html>
css+js网页颜色、皮肤多风格切换演示
5星 · 超过95%的资源 需积分: 50 200 浏览量
2010-06-26
09:56:08
上传
评论
收藏 17KB RAR 举报 
css+js网页颜色、皮肤多风格切换演示.rar （13个子文件） 
codefans.net css切换风格并保存 
oyster.css 2KB violet.css 2KB grass.css 2KB ocean.css 2KB
tl.gif 88B grass.gif 254B tangerine.css 2KB violet.gif 245B
1.jpg 34KB oyster.gif 223B
index.html 4KB tangerine.gif 253B ocean.gif 179B资源评论
H95272015-10-16感謝LZ收集,用起來挺方便.
