<!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 28 浏览量
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收集,用起來挺方便.
YnSky
- 粉丝: 124
- 资源: 2853
最新资源
- 520表白html换成女朋友照片实现3D动态相册源码
- 阿力木拉提的资源：《转折》
- 使用Pandas库加载并预处理销售数据，计算总销售额，并使用Matplotlib和Seaborn库进行数据可视化，展示销售额分布
- 关于基于Web停车场管理系统.zip
- resnet152-pretrained.pth
- 分析和可视化csv展示数据的基本统计信息以及通过直方图、箱线图和散点图来可视化年龄和薪资的分布情况
- 通过读取销售数据CSV文件，进行基本的数据探索，并计算各地区的总销售额，最后使用Seaborn库将数据可视化为一个条形图
- python数据分析与可视化这个代码案例
- HALCON的算子中文介绍手册-Version-10.0.2-Elfen整理版(HALCON 参考手册).zip
- quill.vue
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
