jquery更换网页皮肤

来源：互联网发布：友谊南路淘宝城编辑：程序博客网时间：2024/05/19 12:36

要实现的效果

网页换肤原理

通过调用不同的样式表文件来实现不同皮肤的切换，并且要将换好的皮肤记入cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

实现功能

当皮肤选择按钮被单机后，当前皮肤被勾选，其他均为不勾选
将网页内容皮肤换成当前皮肤
将皮肤存储到cookie中，使得刷新后皮肤不变

代码

用到小技巧，让skin的id和网页样式的文件名称一样……这样比较方便操作

expires:10 意思是10天后过期。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/default.css">    <link rel="stylesheet" href="../css/skin_0.css" id="cssfile"></head><body><ul id="skin">    <li id="skin_0" title="灰色" class="selected">灰色</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="div_side_0">    <div id="news">        <h1 class="title">时事新闻</h1>    </div></div><div id="div_side_1">    <div id="game">        <h1 class="title">娱乐新闻</h1>    </div></div><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.cookie.js"></script><script type="text/javascript">   function switchSkin(skinName){           $("#"+skinName).addClass("selected")               .siblings().removeClass("selected");           $('#cssfile').attr("href","../css/"+skinName+".css");           $.cookie("MyCssSkin",skinName,{path:'/',expires:10});   }    $(function(){        $('#skin li').click(function(){            switchSkin(this.id);        });        var cookie_skin=$.cookie("MyCssSkin");        if(cookie_skin){            switchSkin(cookie_skin);        }    });</script></body></html>

css代码

*{    margin:0px;    padding:0px;}body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}#div_side_0,#div_side_1{    float:left;    width:120px;    height:450px;    }#skin{    margin:10px;    padding:5px;width:210px;    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(theme.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;}h1{   margin:10px;   padding:10px 20px;   width:60px;   color:#ffffff;   font-size:14px;}

skin_0的css，其他雷同

h1{   background:#999999;}

阅读全文

0 0