网页换肤Jquery实现

来源：互联网发布：六一送什么礼物知乎编辑：程序博客网时间：2024/05/21 09:37

1.首先引入css文件与图片，如下：

default.css

<span style="font-size:18px;">* {    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;}.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;}</span>

5个肤色样式文件：

skin0.css

<span style="font-size:18px;">h1{   background:#999999;}</span>

skin1.css

<span style="font-size:18px;">h1{   background:#BB3BD9;}</span>

skin2.css

<span style="font-size:18px;">h1{   background:#E31559;}</span>

skin3.css

<span style="font-size:18px;">h1{   background:#08BECE;}</span>

skin4.css

<span style="font-size:18px;">h1{   background:#FBA60A;}</span>

skin5.css

<span style="font-size:18px;">h1{   background:#AFD400;}</span>

图片：

2.引入两个js文件

jquery-1.3.1.js和jquery.cookie.js

3.html与jquery代码如下;

<span style="font-size:18px;"><!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>    <title></title>    <link href="css/default.css" rel="stylesheet" type="text/css" />    <!--命名css文件id-->    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <!--   引入jQuery的cookie插件 -->    <script src="js/jquery.cookie.js" type="text/javascript"></script>    <script type="text/javascript">        //网页换肤代码实现        $(function () {            $("#skin>li").click(function () {                switchSkin(this.id);            });            //用户打开页面时读取cookie,保证仍是当前页面样式            var myCssCookie = $.cookie("MyCssSkin");            if (myCssCookie) {                switchSkin(myCssCookie);            }        })        function switchSkin(skinName) {            //选择样式            $("#" + skinName).addClass("selected").siblings().removeClass("selected");            //改变肤色,等价于改变样式文件,一个样式文件一个肤色            $("#cssfile").attr("href", "css/" + skinName + ".css");            //保存到cookie中            $.cookie("MyCssSkin", skinName, { path: '/', expires: 10 });        }    </script></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></span>

4.效果

用户选择后，再次进入该页面依然是选中的样式

0 0