【jQuery】换肤

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

relaxingwind

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

阅读量372

点赞数 1

分类专栏： jQuery 文章标签： jQuery 换肤

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注意！！！其中路径可能需要改变！换肤图片需要自己找一下，我的图片小方格大小为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;}

relaxingwind

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录