网页换肤（附全部代码）

最新推荐文章于 2024-01-13 15:53:51 发布

普罗旺斯_浅笑

最新推荐文章于 2024-01-13 15:53:51 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签：网页换肤切换颜色 jquery cookie jquery.cookie

本文链接：https://blog.csdn.net/qq_21491877/article/details/88529163

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先放上实现的效果图,和程序结构图：

要引入几个jquery文件，已上传到我的资源，可下载：

下载链接

myCssSkin.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页换肤</title>
		<!--引入jquery.js和jquery.cookie.js-->
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/jquery.cookie.js" ></script>
		<!--引入方法js-->
		<script type="text/javascript" src="js/func.js" ></script>
		<!--引入css样式-->
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" 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>
</body>
</html>

default.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;
}
#skin_0{
	background:#999999;
    background-position:0px 0px;
}
#skin_1{
	background:#BB3BD9;
    background-position:15px 0px;
}
#skin_2{
	background:#E31559;
    background-position:35px 0px;
}
#skin_3{
	background:#08BECE;
    background-position:55px 0px;
}
#skin_4{
	background:#FBA60A;
    background-position:75px 0px;
}
#skin_5{
	background:#AFD400;
    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;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
    text-decoration: none;
    color: #333333;
}
a:visited {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}

func.js

$(function(){
		    //先从cookie 中取判断有无
		    var cookie_skin = $.cookie("myCssSkin");
		    if(cookie_skin){
		        switchSkin(cookie_skin);
		    }
		    
		    var $li = $("#skin li");
		    $li.click(function(){
		        switchSkin(this.id);
		    })
		    function switchSkin(skinName){
		        $("#"+skinName).addClass("selected").siblings().removeClass("selected");
		        //根据id,动态调用css文件
		        $("#cssfile").attr("href","css/"+skinName+".css");
		        //jquery.cookie 存放
		        $.cookie("myCssSkin",skinName,{path:'/',expires:10});
		        
		    }
		});

分别建立css样式，以后动态引用，切换皮肤。

skin_0.css
h1{
background:#999999;
}

skin_1.css
h1{
background:#BB3BD9;
}

skin_2.css
h1{
background:#E31559;
}

skin_3.css
h1{
background:#08BECE;
}

skin_4.css
h1{
background:#FBA60A;
}

skin_5.css
h1{
background:#AFD400;
}

普罗旺斯_浅笑

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
网页换肤（附全部代码）

先放上实现的效果图,和程序结构图：要引入几个jquery文件，已上传到我的资源，可下载：下载链接 &lt;script type="text/javascript" src="js/jquery.js" &gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.coo...
复制链接

扫一扫