【jQuery】换肤

来源：互联网发布：蜗牛卡充值话费软件编辑：程序博客网时间：2024/06/05 04:22

注意！！！其中路径可能需要改变！换肤图片需要自己找一下，我的图片小方格大小为15px,所以li标签的大小就是15px.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>换肤</title>    <style>        a{text-decoration: none;display: inline-block;width: 100px;height: 20px;line-height:20px;border: 1px solid black;text-align: center;color: black}        #skin{list-style: none;}        #skin li{float: left;width: 15px;height: 15px;margin-right: 10px;background-image: url("../picture/theme.gif")}/*为li标签设置公用的属性*/        #skin_0{background-position: 0 0;}/*通过为止变换改变li显示的背景图片*/        #skin_1{background-position: 15px 0;}        #skin_2{background-position: 35px 0;}        #skin_3{background-position: 55px 0;}        #skin_4{background-position: 75px 0;}        #skin_5{background-position: 95px 0;}        #skin_0.selected{background-position: 0 15px;}        #skin_1.selected{background-position: 15px 15px;}        #skin_2.selected{background-position: 35px 15px;}        #skin_3.selected{background-position: 55px 15px;}        #skin_4.selected{background-position: 75px 15px;}        #skin_5.selected{background-position: 95px 15px;}    </style>    <link href="../css/skin_0.css" type="text/css" rel="stylesheet" id="cssFile">    <!--注意css的名称，必须要与li中id相同，相当于li的id不仅代表各种肤色，还代表肤色对应的css文件.因此要创建六个css文件，并且文件为：skin_0.css,skin_1.css,skin_2.css,skin_3.css,skin_4.css,skin_5.css--></head><body><div>    <ul id="skin">        <li id="skin_0" class="selected"></li>        <li id="skin_1"></li>        <li id="skin_2"></li>        <li id="skin_3"></li>        <li id="skin_4"></li>        <li id="skin_5"></li>    </ul></div><a href="#" id="aa01">第一个</a><a href="#" id="aa02">第二个</a><script src="../jquery.js"></script><!--加载jQuery文件--><script src="../js/jquery.cookie.js"></script><!--加载jQuery.cookie文件--><script>   $(function () {       var $li=$("#skin li");       $li.click(function () {           switchImg(this.id);           var cookie_img=$.cookie("mySkin");           if(cookie_img){               switchImg(cookie_img);           }       });       function switchImg(imgNm) {           $("#"+imgNm).addClass("selected")                   .siblings().removeClass("selected");//为点击的肤色加上selected样式，同时去掉兄弟元素的selected样式           $("#cssFile").attr("href","../css/"+imgNm+".css");           $.cookie("mySkin",imgNm);       }   })</script></body></html>

单独的skin_0,skin_1等css文件内容：

/*这个css文件将你想要改变的元素的背景进行改变！比如导航栏的颜色，按钮的颜色等*/#aa01{background-color: blue;}#aa02{background-color: blue;}

0 0