jquery更换网页皮肤

最新推荐文章于 2021-05-09 15:06:06 发布

yingzizizizizizzz

最新推荐文章于 2021-05-09 15:06:06 发布

阅读量1.9k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/72858459

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

要实现的效果

网页换肤原理

通过调用不同的样式表文件来实现不同皮肤的切换，并且要将换好的皮肤记入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;
}

yingzizizizizizzz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery更换网页皮肤

要实现的效果网页换肤原理通过调用不同的样式表文件来实现不同皮肤的切换，并且要将换好的皮肤记入cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。实现功能当皮肤选择按钮被单机后，当前皮肤被勾选，其他均为不勾选将网页内容皮肤换成当前皮肤将皮肤存储到cookie中，使得刷新后皮肤不变代码用到小技巧，让skin的id和网页样式的文件名称一样……这样比较方便
复制链接

扫一扫

专栏目录