超酷的无刷新可保存CSS换肤实现方法(兼容IE6.0/7.0/8.0/FF)-领先建站CMS提供服务商我们专注于CMS建站产品的研发

12628 查看	11 回复

主题：[分享]超酷的无刷新可保存CSS换肤实现方法(兼容IE6.0/7.0/8.0/FF) [收藏主题] 本贴被认定为精华

转到：

cvq 当前离线

704 主题	0 广播	0 粉丝

级别:六年级

用户积分:4700 分
登录次数:151 次
注册时间:2008/8/26
最后登录:2016/8/22

cvq 发表于：2009/3/12 14:23:00 | 显示全部帖子查看该作者主题楼主

做线上考试培训就选#科汛网校

目标是通过点击图片能无刷新更换外部样式表（换肤），且将最后一次的样式设置保存在cookie中，这样，即使关闭浏览器再打开还是上一次的***。具体效果请看：http://www.feed-add.com
如果觉得不放心或是有广告嫌疑也可以去看看CCTV或者是TOM的首页，原理和效果差不多但方法不一样。
首先先建一个文本文件，输入以下代码：
<!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" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg)) return unescape(arr[2]);
        else return null;
    }
    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }
var cssPath = "css/style";
var styleID=0;
//document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');

</head>

<a href="javascript:styleChange(1);" class="red" title="紫色">紫色</a>
<a href="javascript:styleChange(2);" class="yellow" title="黄色">黄色</a>
<a href="javascript:styleChange(3);" class="blue" title="蓝色">蓝色</a>
<a href="javascript:styleChange(4);" class="green" title="绿色">绿色</a>
</div>
<div id="warptest">
测试文字测试文字</div>
</body>
</html>

保存并重命名为index.html,然后在根目录下新建一个名为CSS的文件夹，把下面这张图片重命名为theme.gif放入这个文件夹中

此主题相关图片如下：theme.gif
，再在这个文件夹中新建五个文本文件，分别重命名为：style.css、style1.css、style2.css、style3.css和style4.css，以下是各个css文件的内容：
style.css:

#title a.red { background-position:15px 0px;}
#title a.yellow { background-position:75px 0px;}
#title a.blue { background-position:55px 0px;}
#title a.green { background-position:95px 0px;}
#warptest { width:480px; height:100px; background:#f7f7f7; border:1px solid #d3d3d3; padding:10px; color:#666;float:left}
#title{float:left}
#title a {margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(theme.gif);}

style1.css：

#warptest { width:480px; height:100px; background:#fdf8f8; border:1px solid #990099; padding:10px; color:#990099}
#title a.red { background-position:15px 15px;}
style2.css：
#warptest { width:480px; height:100px; background:#fffff7; border:1px solid #ffcc00; padding:10px; color:#b28f06}
#title a.yellow { background-position:75px 15px;}

style3.css：
#warptest { width:480px; height:100px; background:#e8f5fe; border:1px solid #a9c9e2; padding:10px; color:#1b3d58}
#title a.blue { background-position:55px 15px;}
style4.css：
#warptest { width:480px; height:100px; background:#f8ffe7; border:1px solid #abdc8d; padding:10px; color:#33581d}
#title a.green { background-position:95px 15px;}
好了，全部保存，用浏览器打开index.html,看看是不是很帅哈。

做新职业技能培训平台就选#科汛网校

支持(0) |

反对(0)

顶端

底部

＜上一主题 | 下一主题＞

首页 1 2 末页下一页